复选框在 event.preventDefault 的情况下无法正常工作，并且在使用 setTimeout 时才工作

问题描述

我刚刚经历了一个场景，我需要自定义一个复选框，以便不应该立即选中，而是，

在用户尝试选中复选框时显示确认框。
如果用户单击“是”，则会选中该复选框。
单击“否”后，复选框不会更改并保持未选中状态。

在处理这个问题时，我使用了 preventDefault 和 stopPropagation 来阻止复选框遵循默认行为，并有条件地选中或取消选中它。

在下面的代码段中，复选框首先被选中，但随后它并没有取消选中，因为代码在使用 setTimeout 时可以正常工作，但没有它就不行。以下是样机：

$(document).ready(function() {
  $('#chkbx').off('click').on('click',function(e) {
    var $checkbox = $(this);
    e.preventDefault();
    e.stopPropagation();
    showConfirmation($checkbox.is(':checked') ? 1 : 0);
  });

  function showConfirmation(s_checked) {
    // Why this if block is making checkbox checked 
    if (s_checked) {
      setTimeout(function() {
        $('#chkbx').val(1);
        $('#chkbx').prop('checked',true);
      },3000);
      // While a similar code without delay is not working
    } else {
      $('#chkbx').val(0);
      $('#chkbx').prop('checked',false);
    }
    return true;
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="chkbx" name="chkbx" />

请帮助我理解，这里出了什么问题，因为在不使用 setTimeout 时代码没有取消选中复选框。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

checkbox javascript jquery preventdefault