jQuery复选框启用/禁用

小开

最佳答案

稍微改变一下你的标记:

$(function() {
enable_cb();
$("#group1").click(enable_cb);
});


function enable_cb() {
if (this.checked) {
$("input.group1").removeAttr("disabled");
} else {
$("input.group1").attr("disabled", true);
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="frmChkForm" id="frmChkForm">
<input type="checkbox" name="chkcc9" id="group1">Check Me <br>
<input type="checkbox" name="chk9[120]" class="group1"><br>
<input type="checkbox" name="chk9[140]" class="group1"><br>
<input type="checkbox" name="chk9[150]" class="group1"><br>
</form>

您可以使用属性选择器来实现这一点，而不需要引入ID和类，但这样比较慢，而且(恕我直言)更难阅读。

小开

<form name="frmChkForm" id="frmChkForm">
<input type="checkbox" name="chkcc9" id="chkAll">Check Me
<input type="checkbox" name="chk9[120]" class="chkGroup">
<input type="checkbox" name="chk9[140]" class="chkGroup">
<input type="checkbox" name="chk9[150]" class="chkGroup">
</form>


$("#chkAll").click(function() {
$(".chkGroup").attr("checked", this.checked);
});

添加功能，以确保所有复选框都被选中/检查，如果所有单独的复选框都被选中:

$(".chkGroup").click(function() {
$("#chkAll")[0].checked = $(".chkGroup:checked").length == $(".chkGroup").length;
});

小开

这是最新的解决方案。

<form name="frmChkForm" id="frmChkForm">
<input type="checkbox" name="chkcc9" id="group1" />Check Me
<input type="checkbox" name="chk9[120]" class="group1" />
<input type="checkbox" name="chk9[140]" class="group1" />
<input type="checkbox" name="chk9[150]" class="group1" />
</form>


$(function() {
enable_cb();
$("#group1").click(enable_cb);
});


function enable_cb() {
$("input.group1").prop("disabled", !this.checked);
}

下面是.attr()和.prop()的使用细节。

jQuery 1.6 +

使用新的.prop()函数:

$("input.group1").prop("disabled", true);
$("input.group1").prop("disabled", false);

jQuery 1.5及以下版本

.prop()函数不可用，所以你需要使用.attr()。

要禁用复选框(通过设置disabled属性的值)，请执行

$("input.group1").attr('disabled','disabled');

要启用(通过完全删除属性)，请执行

$("input.group1").removeAttr('disabled');

任意版本的jQuery

如果你只处理一个元素，使用DOMElement.disabled = true总是最快的。使用.prop()和.attr()函数的好处是，它们将操作所有匹配的元素。

// Assuming an event handler on a checkbox
if (this.disabled)

裁判:设置“checked"jQuery的复选框?

小开

$(document).ready(function() {
$('#InventoryMasterError').click(function(event) { //on click
if (this.checked) { // check select status
$('.checkerror').each(function() { //loop through each checkbox
$('#selecctall').attr('disabled', 'disabled');
});
} else {
$('.checkerror').each(function() { //loop through each checkbox
$('#selecctall').removeAttr('disabled', 'disabled');
});
}
});


});


$(document).ready(function() {
$('#selecctall').click(function(event) { //on click
if (this.checked) { // check select status
$('.checkbox1').each(function() { //loop through each checkbox
$('#InventoryMasterError').attr('disabled', 'disabled');
});


} else {
$('.checkbox1').each(function() { //loop through each checkbox
$('#InventoryMasterError').removeAttr('disabled', 'disabled');
});
}
});
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="selecctall" name="selecctall" value="All" />
<input type="checkbox" name="data[InventoryMaster][error]" label="" value="error" id="InventoryMasterError" />
<input type="checkbox" name="checkid[]" class="checkbox1" value="1" id="InventoryMasterId" />
<input type="checkbox" name="checkid[]" class="checkbox1" value="2" id="InventoryMasterId" />

小开

下面是另一个使用JQuery 1.10.2的示例

$(".chkcc9").on('click', function() {
$(this)
.parents('table')
.find('.group1')
.prop('checked', $(this).is(':checked'));
});

小开

$jQuery(function() {
enable_cb();
jQuery("#group1").click(enable_cb);
});


function enable_cb() {
if (this.checked) {
jQuery("input.group1").removeAttr("disabled");
} else {
jQuery("input.group1").attr("disabled", true);
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="frmChkForm" id="frmChkForm">
<input type="checkbox" name="chkcc9" id="group1">Check Me <br>
<input type="checkbox" name="chk9[120]" class="group1"><br>
<input type="checkbox" name="chk9[140]" class="group1"><br>
<input type="checkbox" name="chk9[150]" class="group1"><br>
</form>