jQuery - 复选框启用/禁用

Question

我有一堆像这样的复选框.如果选中"选中我"复选框,则应启用所有其他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>

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和类,但速度较慢且(imho)难以阅读.

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)

ref:使用jQuery为复选框设置"checked"？

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