当我们单击为复选框分配的标签时，Chrome 和 IE 不会按时触发更改事件

Question

在用户选中复选框时的特定条件下，我想显示一条警报消息并取消选中该复选框，因此要取消选中复选框，我会在其上调用 click 函数，以便它在内部取消选中并触发必要的事件。

我有一个复选框和一个用于复选框的标签，并为标签正确设置了for 属性

• 在 Firefox 中，取消选中适用于复选框及其标签。
• 在 chrome 中，取消选中适用于复选框，但不适用于标签。
• 在 chrome 中，取消选中对复选框或标签不起作用。

通过特定的超时，我能够解决这个问题，但我想要一个不使用超时的解决方案。

您可以在下面查看代码，也可以在此处访问jsfiddle。

$("#id1").on("change", function(event) {
  if (event.target.checked) {
    $(event.target).trigger("click");
  }
});

$("#id2").on("change", function(event) {
  setTimeout(function() {
    if (event.target.checked) {
      $(event.target).trigger("click");
    }
  }, 5);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<input type="checkbox" value="" id="id1">
<label for="id1">Click me</label>
<br/>
<input type="checkbox" value="" id="id2">
<label for="id2">Works with timeout</label>

This work quite well with Firefox but not in chrome and IE9, IE10

我正在寻找 javascript 或 jQuery 解决方案

Answer 1

试试这个：

$("#id1").change(function(event) {
  if (this.checked) {
    this.checked = false;
  }
});

我在 chrome 中尝试过，它似乎可以工作，基本上不是单击复选框，而是修改它的状态

jsfiddle

更新jsfiddle触发点击事件