输入所有 OTP 输入字段后启用提交按钮

Question

我有以下 html 和 javascript

<div class="SMS" id="otp">
    <div class="SMS-wrapper">
        <div class="SMSItem otp">
            <input minlength="1" maxlength="1" name="OTPcode" autocomplete="off" class="SMS_Input" pattern="[0-9]+" type="number" id="code1" onkeyup="onkeyUpEvent(1,event)">             
        </div>
        <div class="SMSItem otp">
            <input minlength="1" maxlength="1" name="OTPcode" autocomplete="off" class="SMS_Input" pattern="[0-9]+" type="number" id="code2" onkeyup="onkeyUpEvent(1,event)">             
        </div>
        <div class="SMSItem otp">
            <input minlength="1" maxlength="1" name="OTPcode" autocomplete="off" class="SMS_Input" pattern="[0-9]+" type="number" id="code3" onkeyup="onkeyUpEvent(1,event)">             
        </div>
        <div class="SMSItem otp">
            <input minlength="1" maxlength="1" name="OTPcode" autocomplete="off" class="SMS_Input" pattern="[0-9]+" type="number" id="code4" onkeyup="onkeyUpEvent(1,event)">             
        </div>
    </div>
</div>
<div id="divButtons" class="buttonContainer" data-kaction="submitDiv" style="display:block">
    <input type="button" name="btnOTP" id="btnOTP" value="submit" class="btn-primary submitbutton disabled">
</div>

我编写了以下 javascript 以在输入所有 OTP 字段时启用提交按钮。 但是提交按钮仍然被禁用。 我正在尝试找出解决方案并在此过程中学习。

$(document).ready(function() {
  var filled = true;
  $('.otp').change(function() {
    $('#otp input[type=number]').each(function() {
      if($(this.val() == '') {
        filled = false;
       }
    });
    return filled;
    
    if (filled) {
      $('#btnOTP').removeClass('disabled');
    } else {
      $('#btnOTP').addClass('disabled');
    }
  })
});

Answer 1

使用return时要小心，它将退出函数，我也更改了事件调用，因为不推荐使用.change

  $('.otp').on('change', function () {
    let filled = true
    
    $('#otp input[type=number]').each(function () {
      if ($(this.val() == '') )
        filled = false;
      
    });

    if (filled) {
      $('#btnOTP').removeClass('disabled');
    } else {
      $('#btnOTP').addClass('disabled');
    }

})

Answer 2

几处更正：

1. 修正 if 中的错字
2. 删除提前退货
3. 如果遇到空则提前退出

$(document).ready(function() {
    var filled = true;

    $('.otp').change(function() {
        $('#otp input[type=number]').each(function() {
            if ($(this.val() == '')) {
                filled = false;
                return false;
            }
        });

        if (filled) {
            $('#btnOTP').removeClass('disabled');
        } else {
            $('#btnOTP').addClass('disabled');
        }
    })
});