CODEWITHSUNDEEP
javascriptjquerycheckbox
Irvıng Ngr
Irvıng Ngr

Reputation: 438

JQuery: Disable/enable multiple checkbox if another checkbox is checked

I'm trying to enable and disable multiple check boxes, when other check boxes are clicked.

I want to disable box1, box2, box3 if any one of Cash or Square or Paypal are checked. Otherwise, I want to box1, box2, box3 to be enabled.

I currently have this code:

var check = $("#checkit1");

$("#checkit1").on('click',checkStatus);
function checkStatus(){
    
if(check.is(':checked'))
{
    $("#click1").prop('disabled', true);
    $("#click2").prop('disabled', true);
    $("#click3").prop('disabled', true);
}
else{
    $("#click1").prop('disabled', false);
    $("#click2").prop('disabled', false);
    $("#click3").prop('disabled', false);
}
    
}
<br>
<div>
    <input type="checkbox" id="checkit1" /> Cash <br>
    <input type="checkbox"  id="checkit2" /> Square <br>
    <input type="checkbox"  id="checkit3" /> Paypal <br>
    
    ------------------------------------------------<br>
    
    <input type="checkbox"  id="checkit4" /> BBT <br>
    <input type="checkbox"  id="checkit5" /> Citi <br>
    **<input type="checkbox"  id="click1" /> dep <br>
    **<input type="checkbox"  id="click2" /> trans <br>
    **<input type="checkbox"  id="click3" /> check <br>
    
</div>

What am I doing wrong?

Upvotes: 1

Views: 4259

Answers (3)

Taplar
Taplar

Reputation: 24965

//add a change event listener to all the options by class
var $disableCity = $('.disableCiti').on('change', function (e) {
  //set all the checkboxes to disabled if any of the top checkboxes
  //are checked, regardless of if the one we just changed is unchecked
  //or not
	$('.citiInput').prop('disabled', $disableCity.filter(':checked').length);
} );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--

Added classes to the relevant checkboxes so we could target them all.

-->
<div>
  <div><input type="checkbox" id="checkit1" class="disableCiti"> Cash</div>
  <div><input type="checkbox" id="checkit2" class="disableCiti"> Square</div>
  <div><input type="checkbox" id="checkit3" class="disableCiti"> Paypal</div>
  <div>------------------------------------------------</div>
  <div><input type="checkbox" id="checkit4"> BBT</div>
  <div><input type="checkbox" id="checkit5"> Citi</div>
  <div>** <input type="checkbox" id="click1" class="citiInput"> dep</div>
  <div>** <input type="checkbox" id="click2" class="citiInput"> trans</div>
  <div>** <input type="checkbox" id="click3" class="citiInput"> check</div>
</div>

Upvotes: 1

Craig Oldfield
Craig Oldfield

Reputation: 99

Whilst the code im showing is far from perfect (too much recursion, will be difficult to rapidly expand number of options etc.) it does achieve what you are asking and should help you to begin to build out better code. 

var check = $("#checkit1");
var check2 = $("#checkit2");
var check3 = $("#checkit3");

$("#checkit1").on('click',checkStatus);
$("#checkit2").on('click',checkStatus);
$("#checkit3").on('click',checkStatus);
function checkStatus(){ 
if(check.is(':checked') || check2.is(':checked') || check3.is(':checked'))
{
    $("#click1").prop('disabled', true);
    $("#click2").prop('disabled', true);
    $("#click3").prop('disabled', true);
}
else{
    $("#click1").prop('disabled', false);
    $("#click2").prop('disabled', false);
    $("#click3").prop('disabled', false);
}

}

The key point to take from this code is the use of the or operator (||). This allows you to chain checks together, for example I chained the three checks together to say "if check or check 2 or check 3 is checked then do the loop".

This is a great link to help understand operators (basics anyway).

Upvotes: 1

Dacre Denny
Dacre Denny

Reputation: 30360

There are a number of ways to achieve this - one way (that retains your code's general structure) would be to select all checkboxes that you want to toggle disable based on by this:

var checkboxes = $("#checkit1, #checkit2, #checkit3");

And then use these selected checkboxes in your click handler to determine if any any are :checked like so:

$(checkboxes).is(':checked') // Returns true is at least one checkbox in selected checkboxes checked

These two lines can then be used in your script to achieve what you need as follows:

// Select checkboxes used to control/toggle disable of target checkboxes
var checkboxes = $("#checkit1, #checkit2, #checkit3");

checkboxes.on('click',checkStatus);

function checkStatus() {

  // if at least one checkbox in selected checkboxes is checked then 
  // disable target checkboxes
  if($(checkboxes).is(':checked'))
  {
      $("#click1").prop('disabled', true);
      $("#click2").prop('disabled', true);
      $("#click3").prop('disabled', true);
  }
  else{
      $("#click1").prop('disabled', false);
      $("#click2").prop('disabled', false);
      $("#click3").prop('disabled', false);
  }        
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<br>
<div>
    <input type="checkbox" id="checkit1" /> Cash <br>
    <input type="checkbox"  id="checkit2" /> Square <br>
    <input type="checkbox"  id="checkit3" /> Paypal <br>
    
    ------------------------------------------------<br>
     
    **<input type="checkbox"  id="click1" /> box1 <br>
    **<input type="checkbox"  id="click2" /> box2 <br>
    **<input type="checkbox"  id="click3" /> box3 <br>
    
</div>

Upvotes: 4

Related Questions