javascript - 如何根据另一个复选框选择取消选中一个复选框？

Question

我的应用程序中有 6 个复选框。

<input type="checkbox" name="vehicle" id="vehicle1" value="one">one<br>
<input type="checkbox" name="vehicle" id="vehicle2" value="two">two<br>
<input type="checkbox" name="vehicle" id="vehicle3 value="three">three<br>
<input type="checkbox" name="vehicle" id="vehicle4" value="four">four<br>
<input type="checkbox" name="vehicle" id="vehicle5" value="five">five<br>
<input type="checkbox" name="vehicle" id="all" value="all">all<br>

我有这个 jquery 函数，如果单击“全部”复选框，它会禁用所有其他复选框。

$("#all").change(function(){
    var $inputs = $('input:checkbox')

    if($(this).is(':checked')){
           $inputs.not(this).prop('disabled',true);
    } else {
       $inputs.prop('disabled',false);
    }
});

如果我选择一个复选框而不是“全部”复选框，我有以下代码将禁用“全部”复选框。

$("[type=checkbox]").click(function() {
    if((this.value == "one") || (this.value == "two") || (this.value == "three") || (this.value == "four") || (this.value == "five")){
        $( "#all" ).prop( 'disabled', true );
    }
    else{
        $( "#all" ).prop( 'disabled', false );
    }
});

我的问题是，如果我在选择一个复选框后尝试取消选中它，这个“全部”复选框仍然被禁用。我希望在取消选中任何复选框后启用它。你们能帮我解决这个问题吗？

Answer 1

您需要验证是否有任何复选框被选中，因此禁用all 复选框，否则启用。

因此您可以使用 $(":checkbox:not(#all)") 选择器将事件附加到那些不同于 #all 的复选框，例如:

然后对于您必须验证所有 chekcbox 的条件，而不仅仅是当前单击的 $(":checkbox:not('#all'):checked") .length > 0.

$("#all").change(function() {
  var $inputs = $('input:checkbox');

  if ($(this).is(':checked')) {
    $inputs.not(this).prop('disabled', true);
  } else {
    $inputs.prop('disabled', false);
  }
});

$(":checkbox:not(#all)").click(function() {
  if ($(":checkbox:not('#all'):checked").length > 0) {
    $("#all").prop('disabled', true);
  } else {
    $("#all").prop('disabled', false);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" name="vehicle" id="vehicle1" value="one">one<br>
<input type="checkbox" name="vehicle" id="vehicle2" value="two">two<br>
<input type="checkbox" name="vehicle" id="vehicle3" value="three">three<br>
<input type="checkbox" name="vehicle" id="vehicle4" value="four">four<br>
<input type="checkbox" name="vehicle" id="vehicle5" value="five">five<br>
<input type="checkbox" name="vehicle" id="all" value="all">all<br>

---

缩短版本片段:

$(":checkbox").click(function() {
  if ($(this).is("#all")) {
    $(":checkbox:not('#all')").prop('disabled', $(this).is(':checked'));
  } else {
    $("#all").prop('disabled', $(":checkbox:not('#all'):checked").length);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="checkbox" name="vehicle" id="vehicle1" value="one">one<br>
<input type="checkbox" name="vehicle" id="vehicle2" value="two">two<br>
<input type="checkbox" name="vehicle" id="vehicle3" value="three">three<br>
<input type="checkbox" name="vehicle" id="vehicle4" value="four">four<br>
<input type="checkbox" name="vehicle" id="vehicle5" value="five">five<br>
<input type="checkbox" name="vehicle" id="all" value="all">all<br>