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复选框，否则禁用enable。

因此，您可以使用$(":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>

Answer 2

浏览输入框，如果未选中所有框，请启用全部复选框。

为此，我添加了一个检查器功能，该功能检查是否所有框都未选中。如果所有复选框都未选中，则启用最后一个复选框。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="col-12 col-sm-6 col-lg-3 arrow--custom">
        <select class="form-control" id="room" name="room">
            <option value="" selected="" disabled="">Nombre de chambre</option>
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>                                
        </select>
     </div>
</div>

$("#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 );
    }
    checker()
  });


  function checker(){
    var flag=0;
    $('input[type=checkbox]').each(function () {
      if(this.checked && $(this).val()!='all'){
         console.log($(this).val())
         flag=1;
      }
    });
    if(flag==0){
     $( "#all" ).prop( 'disabled', false );
    }
 }

Answer 3

没有jQuery，在具有事件委托的纯DOM中。

var $$ = s => Array.from(document.querySelectorAll(s))
var $ = s => document.querySelector(s)

// listen to input event
document.body.addEventListener('input', function(e) {
  var target = e.target;
  var all;
  // when input event
  switch (true) {
    // if all, then disable other inputs
    case target.matches('input[name="vehicle"][value="all"]'):
      $$('input[name="vehicle"]:not([value="all"])')
        .forEach(
          element => element.disabled = target.checked)
      return false
    case target.matches("input[name='vehicle']:not([value='all'])"):
      $('input[name="vehicle"][value="all"]').disabled =
        $('input[name="vehicle"]:checked');
      return false;
  }
})

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

如何根据另一个复选框的选择使一个复选框处于未选中状态？

3 个答案: