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>

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

1 个答案: