Cómo deshabilitar y habilitar input con jQuery: guía completa

¿Cómo deshabilitar y habilitar input con jQuery? Guía para principiantes y no tan principiantes

Imagina esta situación: estás creando un formulario de registro y, hasta que el usuario no seleccione un país, el campo «Ciudad» debe estar bloqueado. O tienes una tienda en línea y el botón «Realizar pedido» está inactivo hasta que se marque la casilla de consentimiento. ¿Te suena familiar? Esta tarea es el pan de cada día de cualquier desarrollador frontend. Y hoy la analizaremos con lupa.

La pregunta «Disable/enable an input with jQuery?» es una de las más populares en Stack Overflow (miles de visitas y decenas de respuestas). Y no es casualidad: la aparente simplicidad esconde varios obstáculos con los que tropiezan los principiantes. En esta guía no solo mostraremos código, sino que te enseñaremos a pensar como un ninja de jQuery. ¡Allá vamos!

¿Por qué no se debe usar .attr() para disabled?

Si ya has buscado la solución en Google, seguramente habrás visto consejos antiguos como $('input').attr('disabled', 'disabled');. Esto funcionaba en la era de jQuery 1.x, pero hoy en día es un callejón sin salida. ¿Por qué?

• .attr() trabaja con atributos HTML, mientras que .prop() lo hace con propiedades del objeto DOM.
• El atributo disabled es una propiedad booleana que debe ser true o false, no una cadena de texto.
• Al usar .attr('disabled', false), jQuery puede simplemente eliminar el atributo, pero no siempre restablece el estado correctamente.

El estándar moderno es usar .prop(). Grábate esto a fuego:

// Deshabilitar input$('#myInput').prop('disabled', true);

// Habilitar input de nuevo$('#myInput').prop('disabled', false);

Sencillo, ¿verdad? Pero profundicemos un poco más.

Ejemplos básicos: deshabilitar y habilitar un solo input

Supongamos que tenemos un campo de entrada de correo electrónico y un botón de activación. Queremos que al hacer clic en el botón, el campo se bloquee o desbloquee.

<input type="email" id="emailInput" placeholder="Introduce tu correo"><button id="toggleBtn">Bloquear campo</button>

<script>$(document).ready(function() {    $('#toggleBtn').on('click', function() {        var $input = $('#emailInput');        var isDisabled = $input.prop('disabled');                // Cambiar el estado        $input.prop('disabled', !isDisabled);                // Cambiar el texto del botón        $(this).text(isDisabled ? 'Bloquear campo' : 'Desbloquear campo');    });});</script>

Observa que usamos $(document).ready() — esto garantiza que el DOM esté cargado antes de ejecutar el script. Sin esto, tu código podría no encontrar los elementos.

Trabajo con grupos de elementos: select, checkbox y textarea

El método .prop() es universal. Funciona no solo con <input>, sino también con <select>, <textarea>, <button> e incluso con conjuntos completos de elementos.

Bloquear todos los elementos del formulario a la vez

Imagina que necesitas bloquear todo el formulario después de enviarlo, para que el usuario no pueda modificar los datos:

<form id="myForm">    <input type="text" name="name" placeholder="Nombre">    <input type="email" name="email" placeholder="Correo">    <select name="country">        <option value="">Seleccione un país</option>        <option value="es">España</option>        <option value="mx">México</option>    </select>    <button type="submit">Enviar</button></form>

<script>// Bloquear todos los input, select y textarea dentro del formulario$('#myForm').find('input, select, textarea, button').prop('disabled', true);</script>

Incluso se puede hacer de forma más elegante: usar :input — un pseudo-selector de jQuery que selecciona todos los elem