如果一个复选框是使用jquery选中的，如何无法选中其他复选框

How to unable and uncheck other checkbox if one is check using jquery?

本文关键字：复选框 其他 何无法 jquery 一个 如果      更新时间：2023-09-26
 <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之外的多个复选框。如果选中了ALL，则必须取消选中并禁用其他复选框。

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

  1. 如果用户更改了.allCheck，则从中驱动.checks复选框
  2. 如果用户更改了.checks复选框，则根据(现在(是否全部或全部选中.checks来驱动.allCheck复选框

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

请注意，在上面我有没有完成这个

并禁用

我们可以，但这不是这些东西通常最有用的方式。相反，上面的内容可以很容易地选择除一个之外的所有内容(勾选"全部"，然后取消勾选该内容(。

但是，如果你真的想要禁用行为，当然这有点简单：你通过.prop("disabled", flag)标记disabled，只需要处理对.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>

$('.allCheck').click(function(){  
    $('.checks').prop('checked',$(this).prop('checked'));
    $('.checks').prop('disabled',$(this).prop('checked'));
});
<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

相关文章：