0

既存のチェックボックス セレクターをリファクタリングしています。最初のオプションは「すべて」で、以下は個別の選択です。「すべて」を選択した場合、他のオプションが選択されないようにしたいと思います。「すべて」がチェックされていない場合、他の選択肢が利用可能になり、個々の選択肢がチェックされている場合、ユーザーが「すべて」を選択すると、コードは他の選択肢をクリアして無効にします。

私は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 もリファクタリングしたいと思います。コードの 2 つのセクションを別々に作成する必要がありました。ページの読み込み時に「すべて」セレクターがチェックされるため、If ステートメントが起動しますが、次の関数は、ユーザーがそれを選択するたびに (ページの読み込み後) 起動します。

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 に答える