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

the js script below correctly disables remaining 2 checkboxes when select large checkbox , re-enables when unchecked. however, logic, i'd need code each specific case.

instead of manually labeling each checked box specific id's , coding disabling logic each case, there way programmatically disable checked boxes 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);         }     }); }) 

you can disable checkboxes inside div sizes except current 1 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