JavaScript：表单填写完成后禁用按钮无法启用问题排查

问题根源 #

• 你的代码只在页面加载时执行一次判断，后续用户填写表单字段时，没有触发重新检查的逻辑，所以按钮状态不会自动更新。
• 操作disabled这种布尔属性时，jQuery的attr()方法并不合适——它针对的是HTML标签上的静态属性，而disabled是DOM元素的固有状态属性，用prop()操作更准确可靠。

修复方案 #

把判断逻辑封装成可复用的函数，然后给所有必填字段绑定输入事件，实时触发状态检查：

// 封装判断按钮状态的函数
function checkSubmitStatus() {
  const mobile = $('#inputMobile').val().trim();
  const email = $('#inputEmail').val().trim();
  const password = $('#inputPassword').val().trim();
  const passwordConfirm = $('#inputPasswordConfirmation').val().trim();
  
  // 所有字段都不为空时启用按钮，否则禁用
  $('#submitBtn').prop('disabled', !(mobile && email && password && passwordConfirm));
}

// 页面加载时初始化按钮状态
$(document).ready(function() {
  // 初始化执行一次，确保按钮默认禁用
  checkSubmitStatus();
  
  // 给所有必填字段绑定input事件，实时响应内容变化
  $('#inputMobile, #inputEmail, #inputPassword, #inputPasswordConfirmation').on('input', checkSubmitStatus);
});

细节补充 #

• 用trim()去除输入内容的首尾空格，避免用户输入空字符（比如只打空格）导致误判。
• input事件会在用户输入、粘贴、删除内容时实时触发，比change事件的响应更及时。
• prop('disabled', 布尔值)直接操作DOM元素的disabled状态，状态切换比attr()更稳定。

内容的提问来源于stack exchange，提问作者Pouya Vaghefi