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.