javascript - HTML Form: Programmatically Disable Remaining Checked Boxes in HTML Form

Question

The js script below correctly disables the remaining two checkboxes when I select the large checkbox and re-enables when unchecked. However, with this logic, I'd need to code for each specific case.

Instead of manually labeling each checked box with specific id's and coding disabling logic for each case, is there a way to programmatically disable the checked boxes that were not checked?

html

    <div class="checkbox" id="sizes">
    <label><input id="a" type="checkbox" name="large" value="1">Large</label>
    <label><input id="b" type="checkbox" name="medium"value="1">Medium</label>
    <label><input id="c" type="checkbox" name="small"value="1">Small</label>
    </div>

js

$(document).ready(function(){
$('input[id=a]').change(function(){
    if($(this).is(':checked')){
        $('input[id=a]').attr('disabled',false);
        $('input[id=b]').attr('disabled',true);
        $('input[id=c]').attr('disabled',true);
    }else{
        $('input[id=a]').attr('disabled',false);
        $('input[id=b]').attr('disabled',false);
        $('input[id=c]').attr('disabled',false);
        }
    });
})

Answer 1

You can disable all the checkboxes inside the div sizes except the current one as below:

HTML:

<div class="checkbox" id="sizes">
  <label><input id="a" type="checkbox" name="large" value="1">Large</label>
  <label><input id="b" type="checkbox" name="medium"value="1">Medium</label>
  <label><input id="c" type="checkbox" name="small"value="1">Small</label>
</div>

JQUERY:

$(document).ready(function(){
   $('#sizes input[type=checkbox]').change(function(){
     if($(this).is(':checked')){
        $("#sizes").find(':checkbox').not($(this)).attr('disabled',true);
      }
      else{
       $("#sizes").find(':checkbox').attr('disabled',false);
     }
   });
 });

jsfiddle Demo