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

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

Answer 1

试试这个：

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

我已尝试使用chrome并且它似乎有效，基本上不是单击复选框而是修改它的状态

jsfiddle

更新jsfiddle触发点击事件

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

1 个答案: