JQuery: Como habilitar/desabilitar um elemento (input)

A partir da versão jQuery 1.6+ devemos usar a função .prop().

// desabilita
$("input").prop('disabled', true);
// habilita
$("input").prop('disabled', false);

Para versão anteriores

Utiliza-se a função .attr().

// desabilita
$("input").attr('disabled','disabled');
// habilita
$("input").removeAttr('disabled');

Exemplo completo:

<div>
  Categoria:
  <input id="categoria" name="categoria" type="text">
</div>
<br>
<button id="adicionar">Adicionar</button>
$("#adicionar").prop('disabled', true);
 
$("#adicionar").click(function(){
  alert("Estou habilitado!");
});
 
$('#categoria').on('input', function(){
    $('#adicionar').prop('disabled', !this.value);
});

Veja o script rodando no JSFIDDLE.

4 comentários em “JQuery: Como habilitar/desabilitar um elemento (input)

  • 20 de dezembro de 2016 em 23:58
    Permalink

    Estava realmente procurando por isso. Achei difícil com javascript. Jquery facilita até nisso. Funcionou perfeitamente aqui. Obrigada

    Resposta
  • 24 de março de 2018 em 12:16
    Permalink

    Nossa procurei tanto essas dicas e estava bem dificil de encontrar, ainda bem disponibilizou agora deu certo aqui.. Obrigado!

    Resposta
  • 22 de abril de 2018 em 12:29
    Permalink

    Obrigado por disponiblizar os codigos, me ajudaram faz alguns dias que estou procurando pela solução… valeu!

    Resposta

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *