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在label标签中，＃checkbox2不在我想根据＃checkbox1启用/禁用＃checkbox2。

选中＃checkbox1 - ＆gt;启用＃checkbox2
未选中＃checkbox1 - ＆gt;禁用＃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。

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

演示：Fiddle

标签中的复选框：Chrome和Firefox中的结果不同

2 个答案: