標簽標簽中的復選框：Chrome和Firefox中的結果不同

Question

<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);
    });
});

頁面中有兩個復選框。 （＃checkbox1，＃checkbox2）
＃checkbox1在標簽標記中，而＃checkbox2在標簽標記中。
我想根據＃checkbox1啟用/禁用＃checkbox2。

• 已選中＃checkbox1->啟用＃checkbox2
• 取消選中＃checkbox1->禁用＃checkbox2

當我選中＃checkbox1時，＃checkbox2已正確啟用。
但是，僅在Firefox中同時檢查＃checkbox2。 （不是IE和Chrome）

我認為問題與事件的排序有關。 但是，我不清楚。

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

編輯：

• 我只想在＃checkbox2啟用后更改其狀態。
• 我想在啟用＃checkbox2時保留＃label1的事件。 （例如Chrome或IE）
• 請同時在Chrome和Firefox上測試DEMO 。

Answer 1

刪除for屬性，然后將事件監聽器從click change為change 。

Answer 2

該label元素for屬性必須被連接到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
        });
    });
});

演示： 小提琴