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

Question

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?

Dacre Denny · Accepted Answer · 2018-11-28 22:12:34Z

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>

omg why i didn't ask here before? I have been hours trying to find a way to make it work. You solved it in 2 mins. Thanks @dacre

Craig Oldfield · Accepted Answer · 2018-11-28 22:16:31Z

1

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

answered Nov 28, 2018 at 22:16

Craig Oldfield

999 bronze badges

1 Comment

Irvıng Ngr Over a year ago

Thanks for your explanation and the @craig link. I'll review it to learn a little more.

Taplar · Accepted Answer · 2018-11-28 22:26:33Z

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

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related