Como desabilitar e habilitar input com jQuery: guia completo

Como desabilitar e habilitar input com jQuery? Guia para iniciantes e além

Imagine a situação: você está criando um formulário de registro e, enquanto o usuário não selecionar o país, o campo "Cidade" deve estar bloqueado. Ou você tem uma loja online e o botão "Finalizar pedido" fica inativo até que a caixa de consentimento seja marcada. Familiar? Essa tarefa é o pão com manteiga de qualquer desenvolvedor front-end. E hoje vamos dissecá-la ao microscópio.

A pergunta "Disable/enable an input with jQuery?" é uma das mais populares no Stack Overflow (milhares de visualizações e dezenas de respostas). E não é por acaso: a aparente simplicidade esconde várias armadilhas em que os iniciantes caem. Neste guia, não vamos apenas mostrar código — vamos te ensinar a pensar como um ninja do jQuery. Vamos lá!

Por que não usar .attr() para disabled?

Se você já pesquisou a solução, provavelmente viu conselhos antigos como $('input').attr('disabled', 'disabled');. Isso funcionava na era do jQuery 1.x, mas hoje é um caminho sem volta. Por quê?

• .attr() trabalha com atributos HTML, enquanto .prop() trabalha com propriedades do objeto DOM.
• O atributo disabled é uma propriedade booleana que deve ser true ou false, não uma string.
• Ao usar .attr('disabled', false), o jQuery pode simplesmente remover o atributo, mas nem sempre redefinir o estado corretamente.

O padrão moderno é usar .prop(). Grave isso como o "Pai Nosso":

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

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

Simples, certo? Mas vamos nos aprofundar.

Exemplos básicos: desabilitando e habilitando um único input

Suponha que temos um campo de entrada de email e um botão de gatilho. Queremos que, ao clicar no botão, o campo seja bloqueado ou desbloqueado.

<input type="email" id="emailInput" placeholder="Digite o email"><button id="toggleBtn">Bloquear campo</button>

<script>$(document).ready(function() {    $('#toggleBtn').on('click', function() {        var $input = $('#emailInput');        var isDisabled = $input.prop('disabled');                // Alternar estado        $input.prop('disabled', !isDisabled);                // Alterar texto do botão        $(this).text(isDisabled ? 'Bloquear campo' : 'Desbloquear campo');    });});</script>

Observe: usamos $(document).ready() — isso garante que o DOM esteja carregado antes da execução do script. Sem isso, seu código pode não encontrar os elementos.

Trabalhando com grupos de elementos: select, checkbox e textarea

O método .prop() é universal. Ele funciona não apenas com <input>, mas também com <select>, <textarea>, <button> e até mesmo com conjuntos inteiros de elementos.

Bloqueando todos os elementos do formulário de uma vez

Imagine que você precisa bloquear todo o formulário após o envio, para que o usuário não altere os dados:

<form id="myForm">    <input type="text" name="name" placeholder="Nome">    <input type="email" name="email" placeholder="Email">    <select name="country">        <option value="">Selecione o país</option>        <option value="br">Brasil</option>        <option value="us">EUA</option>    </select>    <button type="submit">Enviar</button></form>

<script>// Bloquear todos os input, select e textarea dentro do formulário$('#myForm').find('input, select, textarea, button').prop('disabled', true);</script>

Você pode fazer de forma ainda mais elegante: usar :input — um pseudo-seletor do jQuery que seleciona todos os elementos de formulário