jQuery deshabilitar un elemento de formulario

Publicada el por

Siguiendo con algunos ejemplos de casos prácticos de jQuery, os muestro de una manera sencilla cómo deshabilitar un elemento de formulario en jQuery.

jquery tutorial

Aunque os pueda sonar a chino, es una de las funciones que utilizamos muchas veces.

Tenemos un formulario, y no queremos que rellene un campo si no han rellenado previamente otro campo (no se puede escoger el modo de envío de un pedido, si anteriormente no se ha escogido la zona destino). Pues bién, veamos la parte en la que deshabilitamos el campo del formulario. Se verá de forma tenue, y el usuario no podrá rellenarlo. 

<form action="paginadestino.php" method="post">
  <label for="nombre">Nombre</label> 
  <input type="text" id="nombre" name="nombre" value="Nombre ejemplo" /> 
  <input type="submit" value="enviar" />
</form>

Si nos interesa por algún motivo deshabilitar el campo ‘nombre’, con jQuery simplemente deberemos cambiarle el atributo del elemento de la siguiente manera:

$("#nombre").attr("disabled",true);

De esta manera, el usuario no podrá modificar ese campo. Es un ejemplo muy sencillo, pero que si os lo trabajáis podréis utilizarlo para hacer campos de formularios dependiente (habilitar campos según lo que le suceda a otros campos del formulario).

Ahora podéis trabajar con esta función, Attr(9 haciendo que un objeto se habilite o no, dependiendo de alguna condición. Si el campo X se rellena, entonces habilita el campo Y.

Habilitar o deshabilitar segun contenido

Lalo nos pregunta cómo podemos hacer para habilitar o deshabilitar segun el contenido que teng el textbox. Os dejo un ejemplo donde cada vez que el textbox cambia su valor, si éste es Hola, se desactiva. A partir de aquí podéis modificar el código para que haga lo que quiera.

Tenemos de nuevo el formulario

<form action="paginadestino.php" method="post">
  <label for="nombre">Nombre</label> 
  <input type="text" id="nombre" name="nombre" value="Nombre ejemplo" /> 
  <input type="submit" value="enviar" />
</form>

Ahora añadimos el javascript que hará que cada vez que cambie de valor, si éste es Hello, se desactive el textbox.

$("#nombre").change(function() {
 if ( $("#nombre").val()==="Hello" ){
    $("#nombre").attr("disabled",true);
 } else {
    $("#nombre").attr("enabled",true);
 }
});

Y aquí el ejemplo en marcha. Escribid Hello, y esperad un tiempo (en CodePen no es inmediato la función change). O, canviad Change, por KeyUp ( y ejecutará el código cada vez que el usuario escriba una letra dentro del textbox.

See the Pen by Trescomatres Multimèdia S.L. (@trescomatres) on CodePen.

Espero que os sea de interés este pequeño tip que muestra cómo deshabilitar un elemento de formulario en jQuery.