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

Question

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

我有一个复选框和用于复选框的标签，并为标签正确设置了 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

I am looking for javascript or jQuery solution

Answer 1

试试这个:

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

我在 Chrome 中尝试过，它似乎有效，基本上不是单击复选框而是修改其状态

jsfiddle

已更新jsfiddle触发点击事件