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

页面中有两个复选框。(#checkbox1, #checkbox2)
#checkbox1 在标签标签中，而#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属性必须附加到元素上，但是您可以在checkbox1checkbox1 的更改处理程序中更改 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 回答