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

Checkbox in label tag : Different result in Chrome and Firefox

本文关键字：标签 结果 Firefox Chrome 复选框      更新时间：2023-09-26
<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。

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

label元素for属性必须附加到checkbox1元素，但您可以在复选框 1 的更改处理程序中更改复选框 2 的选中状态

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

演示：小提琴

相关文章：