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语句将触发，因为页面加载时会选中“All”选择器，但是当用户选择它时，每次（页面加载后）都会触发以下函数。

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/

JQuery禁用，并清除其他复选框，除了一个标记为＆＃34; All＆＃34;

1 个答案: