我有一堆这样的复选框。如果“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>
当前回答
$(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(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>
<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;
});
稍微改变一下你的标记:
$(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和类，但这样比较慢，而且(恕我直言)更难阅读。
下面是另一个使用JQuery 1.10.2的示例
$(".chkcc9").on('click', function() {
$(this)
.parents('table')
.find('.group1')
.prop('checked', $(this).is(':checked'));
});
$(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" />
