Elemento Check de un formulario para habilitar/deshabilitar un campo

- Escrito el 12/03/08 en Html (4 Comentarios / 1,458 lecturas)

Han llegado algunas personas buscando cómo habilitar o deshabilitar un elemento de un formulario mediante el uso del elemento check de html.

Voy a explicar de forma muy sencilla como podemos llevar a cabo esta operación utilizando html y javascript.

Lo primero que haremos será crearnos nuestro check button y el campo a habilitar/deshabilitar con las siguientes instrucciones

<input type="checkbox"  name="ch" id="ch" onclick="modificarEstado()">
<input type="text" id="cantidad" name="cantidad" style="width: 30px" >

Con esto, lo único que haremos será decirle que cuando sea pulsado o despulsado el check, es decir, que aparezca o no el tick ejecute la función javascript “modificarEstado()”

Ahora tendremos que hacer la función que habilite o deshabilite el campo cantidad, en función de lo que esté seleccionado en el check.

Para ello haremos uso de las propiedad checked del check y la propiedad disabled del cajetín de texto de la siguiente manera

function modificarEstado(){
	if(document.getElementById("ch").checked)
		document.getElementById("cantidad").disabled =false;
	else
		document.getElementById("cantidad").disabled=true;
}

Por lógica, si el check estará inicialmente sin seleccionar, deberemos cargar en el onLoad() de la página el estado correcto del cajetín.

Asociar texto a un checkbox

Si queremos acompañar al checkbox con un texto explicativo, bastará con insertar lo que deseemos justo después del check, pero si además queremos que al pulsar ese texto también se modifique el valor del checkbox tendremos que asociarle a ambos un mismo label, veamos un ejemplo

<label><input type="checkbox"  name="ch" id="ch" onclick="modificarEstado()">  Añadir cantidad </label>

De esta manera, cuando pulsemos en el check y cuando lo hagamos sobre “Añadir cantidad” se habilitará o deshabilitará el cajetín del texto tal cual lo habíamos programado antes.