CODEWITHSUNDEEP
jqueryhtmlcheckbox
krishnaveni
krishnaveni

Reputation: 23

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);
    }
});

Upvotes: 2

Views: 1587

Answers (5)

Govind Jha
Govind Jha

Reputation: 123

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

Upvotes: 1

Irrech
Irrech

Reputation: 1404

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);   });

Upvotes: 0

Cijo V J
Cijo V J

Reputation: 261

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);
}});

Upvotes: 0

Milind Anantwar
Milind Anantwar

Reputation: 82251

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

Upvotes: 1

Yogesh Sharma
Yogesh Sharma

Reputation: 2017

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

Upvotes: 0

Related Questions