Cรณmo deshabilitar un botรณn de un formulario segรบn el estado de un checkbox

Hace unos dรญas un cliente nos pidiรณ que no se pudiera mandar un formulario si un checkbox (casilla de verificaciรณn) no estaba marcado. Por ejemplo el tรญpico de Acepto los Tรฉrminos y Condiciones.
Os dejamos una manera sencilla de hacerlo.

En nuestro caso, la casilla la querรญan marcada por defecto, esto es fรกcil:

<input type=”checkbox” name=”terminos” checked>

Ahora lo que vamos a hacer es crear una funciรณn de Javascript para que compare el estado de la casilla cada vez que se haga click en ella. Este script lo podemos poner al final de la pรกgina del formulario o llamarlo en su carga:

<script type="text/javascript">
function disableSending() {
document.nombredelformulario.nombredelboton.disabled = !document.nombredelformulario.terminos.checked;
};
</script>

Como veis esto comprueba si el campo tรฉrminos (se puede cambiar), no estรก marcado y, si es asรญ, deshabilita el botรณn. Obviamente tenemos que cambiar nombredelformuario y nombredelbotรณn por lo que sea en nuestro caso. Podemos poner los nombres que queramos mientras en el html pongamos name=”nombre” como hemos hecho en tรฉrminos. Hemos mantenido el nombre del campo tรฉrminos pero tambiรฉn se puede cambiar.

Ahora hay que cambiar el checkbox para que llame a esa funciรณn cada vez que se pinche. Modificamos el campo de arriba asรญ:

<input type=”checkbox” name=”terms” checked onclick=”disableSending();”>

Podรฉis ver un ejemplo aquรญ.

A mi me gusta entonces cambiar el CSS para que el checkbox cambie de color si estรก deshabilitado. Por ejemplo:

button[disabled] {

background-color:ย grey;
color:ย #666666;
}

Con eso ya lo tenรฉis funcionando.

 

Deja un comentario

Resumen de nuestra Polรญtica de Privacidad

  • Responsable:ย SmythSys IT Consulting SLNE.
  • Finalidad:ย Gestionar y moderar los comentarios.
  • Legitimaciรณn:ย Necesitas dar tu consentimiento para publicar un comentario.
  • Destinatarios:ย Tus datos se alojan en los servidores de OVH.
  • Derechos:ย Tienes derecho a acceder, rectificar, limitar y suprimir los datos en la direcciรณn del responsable (en nuestra polรญtica de privacidad).

Time limit is exhausted. Please reload CAPTCHA.