jQuery if checkbox is checked diasble other checkbox

问题

I have HTML code:

 <input type="checkbox" name="all" value="all">ALL
 <input type="checkbox" name="agent" value="agent" >Agent
 <input type="checkbox" name="company" value="company">Company
 <input type="checkbox" name="branch" value="branch">Branch

If I check all, other checkbox becomes disabled, if I uncheck, other checkbox is back enabled.

I have tried doing this, using the Script below.

$("input[name='all']").change(function() {
    if(this.checked) {
        $("input[name='agent']").prop("disabled",true);
    }
});

回答1:

Your code will only do the part of disabling. You should rather use checked value as disabled property to toggle state based on check/uncheck status:

 var subinputs = $("input[name=agent],input[name=company],input[name=branch]");
$("input[name='all']").change(function() {
   subinputs.prop("disabled",this.checked);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="all" value="all">ALL
        <input type="checkbox" name="agent" value="agent" >Agent
        <input type="checkbox" name="company" value="company">Company
        <input type="checkbox" name="branch" value="branch">Branch

回答2:

//I have added a id field in your first check box and add a class rest of checkboxes.
//This code is working you can use this

$(function(){
  $('#all_employee').on('click',function(){
    if($(this).is(':checked') === true){
       $('.employee').prop('disabled','disabled');
    }else{      
      $('.employee').prop("disabled", false);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" name="all" value="all" id="all_employee" >ALL
        <input type="checkbox" name="agent" value="agent" class="employee" >Agent
        <input type="checkbox" name="company" value="company" class="employee">Company
        <input type="checkbox" name="branch" value="branch" class="employee">Branch

回答3:

Please check below code, there are many other ways but for your HTML this is the way yo do this

$("input[name='all']").change(function() {
    if(this.checked) {
      $(this).siblings('input:checkbox').prop("disabled",true);
    }
  else {
    $("input[type='checkbox']").removeAttr("disabled");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="all" value="all">ALL
        <input type="checkbox" name="agent" value="agent" >Agent
        <input type="checkbox" name="company" value="company">Company
        <input type="checkbox" name="branch" value="branch">Branch

回答4:

Add missing else:

    $("input[name='all']").change(function() {
if(this.checked) {
            $("input[name='all'] input").prop("disabled",true);
}
else{
        $("input[name='all'] input").prop("disabled",false);
}});

回答5:

Bind a change handler, then just uncheck all of the checkboxes, apart from the one checked:

$('input').on('change', function() {
$('input').not(this).prop('checked', false);   });

来源：https://stackoverflow.com/questions/34393893/jquery-if-checkbox-is-checked-diasble-other-checkbox

标签

jquery

html

checkbox