在复选框单击事件使用的preventDefault

Question

我有一个复选框和要求是，当用户点击，而不是立即改变其状态是，一个模式窗口会弹出，询问他们是/否的问题。根据他们的回答，该复选框应该要么成为选中或处于未选中状态。

我认为这个要求应该使用Event.preventDefault()处理，但是当我试图做到这一点我发现，当我退出事件处理程序，该复选框被恢复到原来的状态，无论我的纲领性尝试设置在处理程序的状态。

$(function() {
  $(":checkbox").click(function(e) {
    e.preventDefault();
    $(this).prop("checked", confirm("Confirm to check the checkbox"));
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <label for="checkbox">Click me</label>
  <input type="checkbox" id="checkbox">
</form>

那么，如何实现所需的行为？

Answer 1

问题是，因为你叫preventDefault()可言。作为checked状态是完全依赖于confirm()呼叫结果你不需要它在这种情况下。

还要注意的是，你应该使用change事件，不click，与复选框的时候。尝试这个：

$(function() {
  $(":checkbox").change(function(e) {
    $(this).prop("checked", confirm("Confirm to check the checkbox"));
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <label for="checkbox">Click me</label>
  <input type="checkbox" id="checkbox">
</form>