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.
Os recomendamos los siguientes productos relacionados con la informática:
Adaptador USB a HDMI, USB 3.0/2.0 a HDMI Audio Video Adapter HD 1080P Video Cable Convertidor para PC, portátil, HDTV Compatible con Windows XP/10/8/7
12,99 € (a partir de 18 mayo, 2022 05:09 GMT +02:00 - Más informaciónProduct prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on [relevant Amazon Site(s), as applicable] at the time of purchase will apply to the purchase of this product.)