Activar y Desactivar campos en JavaScript

Los campos de un formulario se pueden desactivar utilizando el atributo disabled de cualquier tag de formulario, en HTML. Por ejemplo:

<input type="text" name="nombrecampo" disabled>

Con este código obtenemos un campo de tipo texto deshabilitado. El usuario vería este campo sombreado y no podría escribir ni interactura con él. Además, si un campo está desactivado no se envía con el formulario.

Pero lo interesante es que podamos activarlo o desactivarlo según si una opción está marcada o no y eso lo podemos hacer con JavaScript. Por ejemplo, vamos a hacer que cuando el usuario haga click en un checkbox el botón de enviar se active.

<form name="formulario" action="cualquiera.html" method="post">
Acepto las condiciones <input type="check" value="acepto" onclick="document.formulario.enviar.disabled=!document.formulario.enviar.disabled"><br />
<input type="submit" name="enviar" value="Enviar" disabled>
</form>

De esta forma hacemos que al hacer click en el checkbox el botón "Enviar" se active, y si se vuelve a hacer click, se desactive. Al cargar la página sale desactivado, gracias al atríbuto "disabled".

Aquí puedes ver como funciona:

Hemos manipulado la propiedad disabled del elemento input. Cualquier elemento de formulario tiene su propiedad disabled y accedemos mediante JavaScript tal como hemos visto:

nombrecampo.disabled = true; // Así desactivamos
nombrecampo.disabled = false; // Así activamos

Redactado por Nenillo