El botón Enviar se deshabilita automáticamente después de que el evento onSubmit devuelve falso con alerta. Más tarde, el evento onchange tampoco pudo habilitarlo.
A continuación se muestra el javascript y HTML
Al enviar el formulario sin casilla de verificación, aparece una alerta y el botón Enviar se desactiva. Al marcar la casilla Enviar, el botón no puede volver a habilitarlo. ¿Cómo puedo asegurarme de que el botón Enviar permanezca habilitado o en el evento de cambio para habilitarlo?
Cualquier pista es apreciada.
<script type="text/javascript"> function checkme() { if (!document.form.agree.checked) { missinginfo = "You must agree to the condition\n Please tick the checkbox and try again."; alert(missinginfo); return false; } else { return true; } } </script> <form name="form" id="form" action="/gl" onSubmit="return checkme();" method="post"> <input type="checkbox" id="agree" onchange="document.getElementById('submit-form').disabled = !this.checked;"/> I AGREE <div class="row"> <div class="col-sm-4 col-sm-offset-8 col-md-3 col-md-offset-9 input-group"> <button type="submit" value="Submit" class="btn btn-primary" id="submit-form">Submit</button> </div> </div>`
Primero, debe considerar mover su evento escuchando su secuencia de comandos en lugar de usar onSubmit()
Luego, puede seleccionar su entrada y botón en el script, y agregar un detector de eventos a su entrada, de modo que cada vez que cambie, verifique si la casilla de verificación está marcada o no ( checkBox.checked ). Si no está marcado, deshabilita el botón ( button.disabled = !checkBox.checked; )
const checkBox = document.getElementById("agree"); const button = document.getElementById("submit-form"); checkBox.addEventListener("input", () => { button.disabled = !checkBox.checked; }); <form name="form" id="form" action="/gl" onSubmit="return checkme();" method="post"> <input type="checkbox" id="agree" /> I AGREE <div class="row"> <div class="col-sm-4 col-sm-offset-8 col-md-3 col-md-offset-9 input-group"> <button disabled type="submit" value="Submit" class="btn btn-primary" id="submit-form"> Submit </button> </div> </div> </form>