jQuery - 复选框启用/禁用

Question

我有一个一组复选框，其中如果“Check Me”复选框被选中，则所有其他三个复选框应启用，否则它们应禁用。如何使用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>

- Jake

Answer 1

稍微更改您的标记：

$(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和类，但速度较慢且（在我看来）读起来更困难。

- cletus

---

针对禁用元素的部分，请尝试访问此网址：http://jquery-howto.blogspot.com/2008/12/how-to-disableenable-element-with.html。我会帮助您进行翻译，使内容更为通俗易懂，但不会改变原意，并且不会提供任何解释或其他内容。 - Walt Stoneburner

这段话与问题不直接相关，但在IE中，只有当复选框失去焦点时，更改事件才会触发。我通常在第一个复选框的单击事件上调用 $(this).change。 - mcrumley

你可以使用.prop()代替.attr()。 - Reza Owliaei

我有.prop()的问题，它在初始设置时有效，但如果我来回切换，第二次它无法“禁用”复选框。因此我使用了attr()。 - ProVega

这可能会解释你的问题。 - Andrew

Answer 2

这是最新的解决方案。

<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设置复选框的选择状态？

- roydukkey

---

对于像我一样使用 asp:CheckBox 的人来说，它在浏览器中呈现为 span 中的 input。因此，在我的情况下，我必须使用 jQuery 访问它，如 $('.checkboxClassName input').prop('disabled', false) ... 尝试更改“启用”对我也没有起作用 :) 感谢这个答案！ - deebs

Answer 3

<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;
});

- zincorp

Answer 4

这是另一个使用JQuery 1.10.2的示例。

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

- Paolo Guevara

Answer 5

$(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" />

- princespn

Answer 6

$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>

- Biblbroks42