1 
<label for="checkbox2" id="label1">
    click <input type="checkbox" id="checkbox1">
</label>
<input type="checkbox" disabled="true" id="checkbox2"/>

$(document).ready(function(){
    $('#checkbox1').click(function(event) {
        $('#checkbox2').prop('disabled', !this.checked);
    });
});

ページには 2 つのチェックボックスがあります。(#checkbox1, #checkbox2)
#checkbox1 は label タグにあり、#checkbox2 はありません。
#checkbox1 に応じて #checkbox2 を有効/無効にしたい。

  • #checkbox1 をチェック -> #checkbox2 を有効化
  • チェックされていない #checkbox1 -> #checkbox2 を無効にする

#checkbox1 にチェックを入れると #checkbox2 がちゃんと有効になっています。
ただし、#checkbox2 は Firefox でのみ同時にチェックされます。(IEとChromeは違います)

問題はイベントの順序に関連していると思います。しかし、正確にはわかりません。

http://jsfiddle.net/vtLzj/2/

編集:

  • #checkbox2 のみを有効にした後、ステータスを変更したい。
  • #checkbox2 が有効なときに #label1 のイベントを保持したい。(Chrome や IE など)
  • Chrome と Firefox の両方でDEMOをテストしてください。
4

2 に答える 2

2

属性を削除しfor、イベント リスナーを からclickに変更しchangeます。

于 2013-11-05T16:02:16.927 に答える
0

labelelementsfor属性を要素にアタッチする必要がありますcheckbox1が、checkbox1 の変更ハンドラで、checkbox2 のチェック状態を変更できます。

<label for="checkbox1" id="label1">click
    <input type="checkbox" id="checkbox1">
</label>
<input type="checkbox" disabled="true" id="checkbox2" />

それから

$(document).ready(function () {
    $('#checkbox1').change(function (event) {
        $('#checkbox2').prop({
            disabled: !this.checked,
            checked: this.checked
        });
    });
});

デモ:フィドル

于 2013-11-05T16:03:48.550 に答える