我有一堆这样的复选框。如果“Check Me”复选框被选中，所有其他3个复选框都应该被启用，否则它们应该被禁用。我如何使用jQuery做到这一点?
<form name="frmChkForm" id="frmChkForm">
<input type="checkbox" name="chkcc9">Check Me
<input type="checkbox" name="chk9[120]">
<input type="checkbox" name="chk9[140]">
<input type="checkbox" name="chk9[150]">
</form>
当前回答
<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;
});
其他回答
$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>
稍微改变一下你的标记:
$(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;
});
$(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" />
这是最新的解决方案。
<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)
参考:设置“检查”的复选框与jQuery?
