33 Votos

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.

ResponderPositivoNegativoFechaVotos
00 Votos

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

ResponderPositivo Negativo
00 Votos

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

ResponderPositivo Negativo
00 Votos

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

Positivo Negativo
00 Votos

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

Positivo Negativo
00 Votos

Sí, eso fue todo.

¡Muchas gracias por la ayuda súper rápida!
22/02/2023 a las 17:21

Positivo Negativo
Responder
Responder

Sobre el Autor

AvatarPuede 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

jQuery: ¿Hay un Elemento?

Consejo | 1 Comentario

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.