Tengo el siguiente html y el 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>Y he escrito el siguiente javascript para habilitar el botón Enviar cuando se ingresan todos los campos OTP. Pero el botón de enviar todavía está deshabilitado. Estoy tratando de encontrar la solución y aprender en el proceso.
$(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'); } }) });tenga cuidado al usar return , saldrá de la función, también cambié la llamada de evento porque .change está en desuso
$('.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'); } })Pocas correcciones:
$(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'); } }) });