javascript - 标签标签 : Different result in Chrome and 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在label标签中，#checkbox2不在。
我想根据#checkbox1 启用/禁用#checkbox2。

• 选中#checkbox1 -> 启用#checkbox2
• 未选中#checkbox1 -> 禁用#checkbox2

当我选中#checkbox1 时，#checkbox2 被正确启用。
但#checkbox2 仅在 Firefox 中同时选中。 (IE 和 Chrome 不是)

我认为问题与事件的顺序有关。但是，我并不清楚。

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

编辑:

• 我只想在#checkbox2 启用后更改它的状态。
• 我想在启用#checkbox2 时保留#label1 的事件。 (例如 Chrome 或 IE)
• 请测试DEMO同时使用 Chrome 和 Firefox。

Answer 1

移除 for 属性，并将事件监听器从 click 更改为 change。