jQuery: Deshabilitar Botón Enviar si ninguna Casilla de Verificación está marcada
Tutorial de Stefan Trost | Última actualización el 22/02/2023 | Creado el 31/01/2023
A veces, nos gustaría permitir el envío de un formulario solo si una o al menos una casilla de verificación está marcada. En este pequeño tutorial, me gustaría mostrarle cómo hacer esto usando JavaScript y jQuery.
El siguiente guión se asegura de que el botón "Enviar" solo esté activo o enabled cuando se seleccione al menos una casilla de verificación (checkbox) del formulario correspondiente.
HTML
Nuestro HTML es un formulario simple que contiene tres casillas de verificación y un botón de envío:
<form action=""> <input class="cbox" type="checkbox" name="cb1" value="1"> 1 <input class="cbox" type="checkbox" name="cb2" value="2"> 2 <input class="cbox" type="checkbox" name="cb3" value="3"> 3 <input id="bt_submit" type="submit" value="Enviar"> </form>
JavaScript/jQuery
Dejamos que el siguiente código jQuery se ejecute inmediatamente después de cargar la página HTML usando $(document).ready():
<script type="text/javascript">
$(document).ready(function() {
$('#bt_submit').attr("disabled", true);
$('.cbox').change(function() {
$('#bt_submit').attr('disabled', $('.cbox:checked').length == 0);
});
});
</script>En primer lugar, configuramos nuestro botón de envío (submit button) en deshabilitado (disabled) (más sobre eso en la siguiente sección). Después de eso, aplicamos una función a las casillas de verificación (checkboxes) que se llama cada vez que se cambia una de las casillas de verificación. Esta función ajusta el estado del botón de envío según el estado de selección. Para esto, verificamos que el número de casillas de verificación seleccionadas sea 0 y establecemos el atributo "disabled" según esta condición.
Importante: Considere a los Usuarios con JavaScript desactivado
Esta función solo funciona cuando JavaScript está activado en el navegador del usuario. No es un reemplazo de una verificación de la entrada del usuario en el lado del servidor que debe llevarse a cabo adicionalmente.
Por esta razón, también configuramos el atributo "disabled" del botón de envío en nuestro código JavaScript y no en el HTML, lo que también podría hacerse teóricamente. El botón submit inicialmente no está desactivado al cargar la página, incluso si no se selecciona ninguna casilla de verificación en este momento. Para los usuarios con JavaScript activo, el botón se desactiva inmediatamente después de la carga, estos usuarios no notan que el botón estuvo activo una vez. Para usuarios con JavaScript desactivado, el código JavaScript no se puede ejecutar. El botón permanece activo para estos usuarios y el formulario utilizable. Si hubiésemos activado inmediatamente el botón deshabilitado a través de HTML, el formulario no sería utilizable para estos usuarios.
Sobre el Autor
Puede encontrar software de Stefan Trost en la pagina es.sttmedia.com. ¿Necesita un software individual según sus propios requisitos? Escribenos: es.sttmedia.com/contacto
Ver Perfil
Temas Relacionados
PHP: Enviar Formulario con muchas Casillas de Verificación a un Script cómodamente
Consejo | 2 Comentarios
HTML: Preasignar un Formulario HTML con Datos
Tutorial | 0 Comentarios
VirtualBox: Cambiar la Fecha y la Hora
Tutorial | 10 Comentarios
JavaScript: Capturar el Envío de un Formulario
Tutorial | 0 Comentarios
Delphi/Lazarus: Resultado de ShowModal
Consejo | 0 Comentarios
jQuery: ¿Hay un Elemento?
Consejo | 1 Comentario
JavaScript: Cómo cambiar y leer un valor de input sin jQuery usando JavaScript puro
Pregunta | 1 Respuesta
Aviso Importante
Por favor tenga en cuenta: Las contribuciones publicadas en askingbox.com son contribuciones de los usuarios y no deben reemplazar el asesoramiento profesional. No son verificados por independientes y no reflejan necesariamente la opinión de askingbox.com. Aprende más.
Participar
Haga su propia pregunta o escriba su propio artículo en askingbox.com. He aquí cómo.
Y si solo tiene una checkbox, es mucho más fácil de implementar:
$("#cbox").click(function() { $("#bt_submit").attr("disabled", !this.checked); });En this.checked se almacena, si la casilla de verificación en la que se hizo clic esté seleccionada o no.
Con el uso de !this.checked, podemos configurar nuestro botón de submit para que sea exactamente lo contrario.
05/02/2023 a las 21:15
No soy un experto en JavaScript, pero me gustaría preguntar cómo se ve todo cuando hay que hacer clic en dos casillas de verificación antes de activar el botón enviar.
19/02/2023 a las 19:18
Quiere decir algo como esto:
$('.cbox').change(function() { $('#bt_submit').attr('disabled', $('#cbox1:checked') && $('#cbox2:checked')); });Sus casillas de verificación deben tener la clase "cbox" y una casilla de verificación la ID "cbox1" y la otra la ID "cbox2".
19/02/2023 a las 22:13
Aquí:
$('#bt_submit').attr("disabled",true); $('.chkfield').change(function() { $('#bt_submit').attr('disabled', $('#cbox1:checked').length == 0 || $('#cbox2:checked').length == 0); });Esa es la solución correcta completa.
21/02/2023 a las 20:35
Sí, eso fue todo.
¡Muchas gracias por la ayuda súper rápida!
22/02/2023 a las 17:21