Отключение JQuery и очистка других флажков, кроме одного labled «Все»

Question

Я пересматриваю существующий переключатель выбора флажка. Первый вариант - «Все», а следующие - индивидуальные. Я бы хотел, если выбрано «Все», отключите другие параметры. Если «Все» не проверено, другие выборы становятся доступными, и, если будут отмечены какие-либо отдельные выборы, пользователь выбирает «Все», код очищает остальные и отключает их.

Я новичок в jQuery, но смог настроить таргетинг на функциональность, когда выбрано «Все», как на «щелчке», так и при загрузке страницы.

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

и для моего JQuery

if ($('#ctl12_0 input[type=checkbox]:checked')) { 
    alert('yup'); 
} 

$('#ctl12_0').on('click', function(){ 
    if ($('#ctl12_0').is(':checked')) { 
     alert('yup'); 
    }; 
}); 

Я хотел бы также, чтобы реорганизовать эту JQuery. Мне пришлось написать два отдельных раздела кода. Оператор If будет срабатывать, потому что переключатель «Все» проверяется при загрузке страницы, но при каждом выборе пользователем (после загрузки страницы) будет срабатывать следующая функция.

Answer 1

Вы можете сделать что-то вроде этого:

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

Демо: http://jsfiddle.net/YYrkj/1/