Jquery实现输入框内容变化时禁用/启用复选框：清空后启用失效问题

问题原因 #

当前代码用change paste keyup组合事件监听输入变化，其中change事件仅在输入框失去焦点时触发。如果用户直接删除内容后没点击其他区域（未失焦），change事件不会执行，导致清空输入后复选框无法启用。另外，代码没处理输入框仅含空格的情况，可能出现误判。

修复方案 #

用input事件替代原有事件组合，它能监听所有输入内容的实时变化（包括键盘输入、粘贴、删除、剪切等操作），同时通过trim()去除输入内容的首尾空格，避免空格导致的误判。

修改后的JavaScript代码 #

$('#userId').on('input', function () {
  // 去除首尾空格后判断是否为空
  const hasContent = $(this).val().trim() !== '';
  $("#vendorId").prop("disabled", hasContent);
});

完整可运行代码示例 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="form-control" id="userId" placeholder="user's name">
  
<div>
  <label>
    <input type="checkbox" class="checkbox" id="vendorId" value="vendor">
    Vendors
  </label>
</div>

<script>
$('#userId').on('input', function () {
  const hasContent = $(this).val().trim() !== '';
  $("#vendorId").prop("disabled", hasContent);
});
</script>

说明 #

• input事件会在输入框内容发生任何变化时立即触发，无需等待失焦，确保复选框状态和输入框内容实时同步；
• trim()处理可以避免用户输入空格时，系统误判为输入框非空的情况。

内容的提问来源于stack exchange，提问作者Alex Aniapam