javascript - JQuery disabling, and clearing other checkboxes, besides one labled "All" -

i refactoring existing checkbox selector. first option "all", , following individual selections. to, if "all" selected, disable other options being selected. if "all" not checked, other selections become available, and, if individual selections checked, user selects "all," code clear other ones out, , disabling them.

i new jquery, have been able target functionality when "all" selected, on both 'click' , when page loads.

<table id="ctl12" class="dyncheckboxlist"> <tr>     <td><input id="ctl12_0" type="checkbox" name="ctl12$0" checked="checked"/><label for="ctl12_0">all</label></td> </tr> <tr>     <td><input id="ctl12_1" type="checkbox" name="ctl12$1"/><label for="ctl12_1">bn</label></td> </tr> <tr>     <td><input id="ctl12_2" type="checkbox" name="ctl12$2"/><label for="ctl12_2">c2</label></td> </tr> <tr>     <td><input id="ctl12_3" type="checkbox" name="ctl12$3"/><label for="ctl12_3">cc</label></td> </tr> </table> 

and jquery

if ($('#ctl12_0 input[type=checkbox]:checked')) {     alert('yup'); }  $('#ctl12_0').on('click', function (){     if ($('#ctl12_0').is(':checked')) {         alert('yup');     }; }); 

i'd refactor jquery. had write 2 separate sections of code. if statement fire because "all" selector checked when page loads, following function fire each time (after page load) when user selects it.

you can this:

$("#ctl12_0").change(function() {     var inputs = $("[id^=ctl12]:checkbox").not(this);     this.checked ? inputs.prop({disabled: true, checked: false})                   : inputs.prop("disabled", false); }).change(); 

demo: http://jsfiddle.net/yyrkj/1/