OTP输入框全部填写后启用提交按钮的jQuery代码问题排查

你的代码一共存在5处问题，直接导致按钮状态无法正常切换：

• 语法错误：取值语句括号位置错误，if($(this.val() == '') 将判断逻辑错误包裹在jQuery构造器内，正确写法应为if($(this).val() == '')，该错误会直接触发JS运行异常，后续逻辑全部中断。
• 不可达代码：你在按钮状态判断逻辑前写了return filled;，return语句会直接终止当前事件回调的执行，后面加、移除disabled类的代码永远不会被执行。
• 状态变量初始化位置错误：filled变量定义在事件监听外部，第一次执行回调时如果被标记为false，后续触发回调时不会重置为初始值，会导致判断结果永久错误。
• 事件绑定与触发时机问题：你将change事件绑定在.otp父容器上，且change事件仅在输入框失焦时才会触发，用户输入完单字符自动跳转焦点时不会触发校验，响应滞后。
• 按钮状态修改不完整：仅通过类名控制按钮样式，没有同步修改按钮的原生disabled属性，就算移除了disabled类，按钮仍可能处于不可点击状态。

$(document).ready(function() {
  // 直接绑定到OTP输入框，用input事件实现输入即校验
  $('#otp .SMS_Input[type=number]').on('input', function() {
    // 每次校验前重置状态，避免上次结果干扰
    let allFilled = true;
    // 遍历所有OTP输入框
    $('#otp input[type=number]').each(function() {
      if ($(this).val().trim() === '') {
        allFilled = false;
        return false; // 发现空值直接终止遍历，减少无效计算
      }
    });
    // 同步更新按钮样式与可用状态
    $('#btnOTP').toggleClass('disabled', !allFilled).prop('disabled', !allFilled);
  })
});

• 采用input事件代替change事件，用户输入、删除内容时立刻触发校验，无需等待输入框失焦，交互更流畅
• 状态变量allFilled定义在事件回调内部，每次校验都从“默认全部填充”的初始状态开始判断，不会残留历史校验结果
• 遍历输入框时只要发现空值就直接终止循环，不需要遍历完所有输入框，性能更优
• 用toggleClass和prop同步修改按钮的样式类和原生disabled属性，保证视觉样式和实际可用状态完全一致

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