0

我正在重构现有的复选框选择器。第一个选项是“全部”，以下是个人选择。我想，如果选择“全部”，则禁用其他选项。如果未选中“全部”，则其他选项变为可用，并且，如果选中任何单个选项，则用户选择“全部”，代码将清除其他选项并禁用它们。

I am new to jQuery, but have been able to target the functionality when "All" is selected, on both 'click' and when the 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>

对于我的 JQuery

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

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

我还想重构这个 JQuery。我必须编写两个单独的代码部分。If 语句将触发，因为在页面加载时检查了“All”选择器，但是当用户选择它时，每次（页面加载后）都会触发以下函数。

4

1 回答 1

2

你可以这样做：

$("#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/

于 2013-07-31T21:04:38.713 回答