CODEWITHSUNDEEP
jquery
terrid25
terrid25

Reputation: 1946

single checkbox updates state of muliple checkboxes

I have a group of checkboxes, one of them has a label of 'None'. When This is ticked, I'd like the others to be disabled. If the 'None' checkbox is unchecked, then the checkboxes that were disabled, are enabled again.

I have the following code:

 $(document).ready(function(){
 $("#select_none").click(function() 
 {
 $('#select_blue').attr('disabled', true);
 $('#select_green').attr('disabled', true);
 $('#select_red').attr('disabled', true);
 $('#select_black').attr('disabled', true);     
 $('#select_white').attr('disabled', true);
 $('#select_yellow').attr('disabled', true);
 $('#select_pink).attr('disabled', true);

 });
});

This simply just disables if the checkbox has been clicked on, it doesn't toggle.

Could someone help me with the toggle functionality?

Upvotes: 0

Views: 106

Answers (3)

Chinmayee G
Chinmayee G

Reputation: 8117

Try this code

$(document).ready(function(){
 $("#select_none").click(function() 
 {
     if(this.checked) {
     $('#select_blue').attr('disabled', true);
     $('#select_green').attr('disabled', true);
     $('#select_red').attr('disabled', true);
     $('#select_black').attr('disabled', true);     
     $('#select_white').attr('disabled', true);
     $('#select_yellow').attr('disabled', true);
     $('#select_pink').attr('disabled', true);
     }else {
      $('#select_blue').removeAttr('disabled');
     $('#select_green').removeAttr('disabled');
     $('#select_red').removeAttr('disabled');
     $('#select_black').removeAttr('disabled');    
     $('#select_white').removeAttr('disabled');
     $('#select_yellow').removeAttr('disabled');
     $('#select_pink').removeAttr('disabled');
     }

 });
});

Upvotes: 2

duncan
duncan

Reputation: 31912

Could maybe try this:

$(document).ready(function(){
 $("#select_none").click(function() 
 {
 $('#select_blue').attr('disabled', $("#select_none").attr('checked'));
 $('#select_green').attr('disabled', $("#select_none").attr('checked'));
 $('#select_red').attr('disabled', $("#select_none").attr('checked'));
 $('#select_black').attr('disabled', $("#select_none").attr('checked'));     
 $('#select_white').attr('disabled', $("#select_none").attr('checked'));
 $('#select_yellow').attr('disabled', $("#select_none").attr('checked'));
 $('#select_pink).attr('disabled', $("#select_none").attr('checked'));

 });
});

If that doesn't work, check if select_none is checked. If true, set all those checkboxes to disabled, as you're doing already. If false, remove the 'disabled' attribute.

Upvotes: 0

Chowlett
Chowlett

Reputation: 46667

You could use the toggle event.

While you're at it, you could also consider giving your select_<colour> checkboxes a common class, allowing you to do $('.colour-select').attr('disabled', true);

Upvotes: 1

Related Questions