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

Question

我刚刚经历了一个场景，我需要自定义一个复选框，因此不应该立即检查，而是，

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

在处理该问题时，我使用 preventDefault 后跟 stopPropagation 来阻止复选框遵循默认行为并有条件地使其选中或取消选中。

在下面的 sn-p 中，复选框首先被选中，但随后它并没有取消选中，因为代码在使用 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 时没有取消选中复选框。

Answer 1

event.preventDefault() 方法阻止默认操作。在单击复选框的情况下，默认操作是切换其checked 状态，这在相关代码中被阻止。使用setTimeout，代码实际上是在单击事件完成后执行的，因此不会观察到 preventDefault。

但是，为了使这项工作有效，您可以选择仅在您确实想阻止复选框切换时使用event.preventDefault()。看看下面的sn-p：

$(document).ready(function() {
  $('#chkbx').on('click', function(e) {
    var $checkbox = $(this);
    e.stopPropagation();
    
    if($checkbox.is(":checked")) {
      if(confirm('Do you want to check?')) {
        $checkbox.val(1);
      } else {
        // use `preventDefault()` to block checkbox checking when not confirmed
        e.preventDefault();
      }
    } else {
      $checkbox.val(0);
    }
  });
})

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

Answer 2

我认为您在这里采取了错误的方法。除了e.preventDefault() 和计时器，您可以禁用复选框，直到您引用的“其他按钮”被按下。

$(document).ready(function() {
  var $checkbox = $("#chkbx");
  
  // Simply set up your button click event
  $('button').on('click', function(e) {
    $checkbox.removeAttr("disabled"); // Enable the checkbox
  });
  
  $checkbox.on("click", showConfirmation);

  function showConfirmation(event) {
    console.log("The checkbox is checked: " + event.target.checked);
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Click to enable</button>
<input type="checkbox" id="chkbx" name="chkbx" disabled>Some question