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.