基于复选框的jQuery文本框验证问题：未勾选时验证仍触发

我希望仅在复选框被勾选时对文本框的值进行验证，目前验证功能可运行，但复选框未勾选时验证仍会执行。

原代码 #

JavaScript #

$("#personal_deliver_same").on("click", function(){
  var check = $("#personal_deliver_same").is(':checked');
  if(check){
    $("#input-payment-postcode").keyup(function (){ 
      if($("#input-payment-postcode").val().length > 5) {
        alert("in2");
      }
    });     
  }
  else{
    alert("out2");
  }
});

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label class="control-label" for="input-payment-postcode">Post Code</label>
<input type="text" name="personal_details[postcode]" value="" placeholder="" id="input-payment-postcode" class="formcontrol">
<br>
<input type="checkbox" id="personal_deliver_same" name="personal_details[shipping_address]" value="1" />
<label>My Checkbox</label>

问题原因 #

每次勾选复选框时，你都会给文本框绑定新的keyup事件，但取消勾选时并没有移除之前绑定的事件。这意味着即使取消了勾选，之前绑定的事件依然存在，输入文本时仍会触发验证逻辑。

解决方法 #

方案1：单次绑定，内部判断状态 #

最简洁的方式是给文本框绑定一次keyup事件，每次触发时先检查复选框的状态，再决定是否执行验证：

$("#input-payment-postcode").on("keyup", function() {
  // 仅在复选框勾选时执行验证
  if ($("#personal_deliver_same").is(':checked')) {
    if ($(this).val().length > 5) {
      alert("邮政编码长度不能超过5位");
    }
  }
});

方案2：动态绑定/解绑事件 #

如果需要严格在复选框切换时绑定或移除事件，记得使用off()先清除已有事件，避免重复绑定：

$("#personal_deliver_same").on("click", function(){
  const isChecked = $(this).is(':checked');
  const $postcodeInput = $("#input-payment-postcode");
  
  if(isChecked){
    // 先移除旧事件，再绑定新事件
    $postcodeInput.off("keyup").on("keyup", function (){ 
      if($(this).val().length > 5) {
        alert("邮政编码长度不能超过5位");
      }
    });     
  }
  else{
    // 移除验证事件
    $postcodeInput.off("keyup");
    alert("已停止邮政编码验证");
  }
});

完整可运行示例 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<label class="control-label" for="input-payment-postcode">邮政编码</label>
<input type="text" name="personal_details[postcode]" value="" placeholder="" id="input-payment-postcode" class="form-control">
<br>
<input type="checkbox" id="personal_deliver_same" name="personal_details[shipping_address]" value="1" />
<label>勾选后验证邮政编码</label>

<script>
$("#input-payment-postcode").on("keyup", function() {
  if ($("#personal_deliver_same").is(':checked')) {
    if ($(this).val().length > 5) {
      alert("邮政编码长度不能超过5位");
    }
  }
});
</script>

内容的提问来源于stack exchange，提问作者dee flor