Question

 <input type="checkbox" class="allCheck" />all
 <input type="checkbox" class="checks" />shoes
 <input type="checkbox" class="checks" />bag
 <input type="checkbox" class="checks" />car

如果选中复选框全部，如何无法取消选中其他复选框？

注意：我想检查多个复选框，如果选中ALL则必须取消选中并禁用其他复选框。

Answer 1

这是相当直接的，但有些问题：

如果用户更改了.allCheck，请从中驱动.checks复选框
如果用户更改了.checks复选框，请根据.allCheck是否（现在）已选中

.checks

// If `.allCheck` is changed by the user, drive the `.checks` checkboxes from it
$(".allCheck").on("change", function() {
  $(".checks").prop("checked", this.checked);
});
// If a `.checks` checkbox is changed by the user, drive the `.allCheck`
// checkbox based on whether all or none of `.checks` are (now) checked
$(".checks").on("change", function() {
  var all = $(".checks").get().every(function(cb) {
    return cb.checked;
  });
  $(".allCheck").prop("checked", all);
});

<label><input type="checkbox" class="allCheck" />all</label>
<label><input type="checkbox" class="checks" />shoes</label>
<label><input type="checkbox" class="checks" />bag</label>
<label><input type="checkbox" class="checks" />car</label>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

请注意，上面我不完成了这个

...和禁用

我们可以，但这不是通常最有用的方式。相反，上面的内容可以轻松选择除了一个之外的所有内容（通过勾选“全部”，然后取消选中）。

但如果您真的想要这种禁用行为，则可以更简单一点：您通过disabled标记.prop("disabled", flag)，只需处理.allCheck的更改。

$(".allCheck").on("change", function() {
  $(".checks")
      .prop("checked", this.checked)
      .prop("disabled", this.checked)
});

<label><input type="checkbox" class="allCheck" />all</label>
<label><input type="checkbox" class="checks" />shoes</label>
<label><input type="checkbox" class="checks" />bag</label>
<label><input type="checkbox" class="checks" />car</label>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 2

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="allCheck" />all
 <input type="checkbox" class="checks" />shoes
 <input type="checkbox" class="checks" />bag
 <input type="checkbox" class="checks" />car

＆＃13;

{{1}}

＆＃13;

如果使用jquery检查其他复选框，如何取消和取消选中其他复选框？

2 个答案: