Desabilitar / habilitar uma input com jQuery?

$input.disabled = true; 

ou

 $input.disabled = "disabled"; 

Qual é o caminho padrão? E, inversamente, como você ativa uma input desativada?

jQuery 1.6+

Para alterar a propriedade disabled , você deve usar a function .prop() .

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

jQuery 1.5 e abaixo

A function .prop() não existe, mas .attr() faz o mesmo:

Defina o atributo desativado.

 $("input").attr('disabled','disabled'); 

Para habilitar novamente, o método apropriado é usar .removeAttr()

 $("input").removeAttr('disabled'); 

Em qualquer versão do jQuery

Você sempre pode confiar no object DOM real e é provavelmente um pouco mais rápido que as outras duas opções se você está lidando apenas com um elemento:

 // assuming an event handler thus 'this' this.disabled = true; 

A vantagem de usar os .prop() ou .attr() é que você pode definir a propriedade para um grupo de itens selecionados.


Nota: Em 1.6 existe um método .removeProp() que se parece muito com removeAttr() , mas NÃO DEVE SER USADO em propriedades nativas como 'disabled' trecho 'disabled' da documentação:

Nota: Não use este método para remover propriedades nativas, como marcadas, desativadas ou selecionadas. Isso removerá a propriedade completamente e, uma vez removido, não poderá ser adicionado novamente ao elemento. Use .prop () para definir essas propriedades como false.

De fato, eu duvido que haja muitos usos legítimos para este método, adereços booleanos são feitos de tal maneira que você deve configurá-los para false em vez de “removê-los” como seus equivalentes “atributo” em 1.5

Apenas por uma questão de novas convenções e tornando-a adaptável no futuro (a menos que as coisas mudem drasticamente com o ECMA6 (????):

 $(document).on('event_name', '#your_id', function() { $(this).removeAttr('disabled'); }); 

e

 $(document).off('event_name', '#your_id', function() { $(this).attr('disabled','disabled'); }); 
  // Disable #x $( "#x" ).prop( "disabled", true ); // Enable #x $( "#x" ).prop( "disabled", false ); 

Às vezes, você precisa desativar / ativar o elemento de formulário, como input ou área de texto. Jquery ajuda você a facilmente fazer isso com a configuração de atributo desativado para “desativado”. Por exemplo:

  //To disable $('.someElement').attr('disabled', 'disabled'); 

Para ativar o elemento desativado, é necessário remover o atributo “disabled” desse elemento ou esvaziá-lo. Por exemplo:

 //To enable $('.someElement').removeAttr('disabled'); // OR you can set attr to "" $('.someElement').attr('disabled', ''); 

consulte: http://garmoncheg.blogspot.fr/2011/07/how-to-disableenable-element-with.html

 $("input")[0].disabled = true; 

ou

 $("input")[0].disabled = false; 

Você pode colocar isso em algum lugar global em seu código:

 $.prototype.enable = function () { $.each(this, function (index, el) { $(el).removeAttr('disabled'); }); } $.prototype.disable = function () { $.each(this, function (index, el) { $(el).attr('disabled', 'disabled'); }); } 

E então você pode escrever coisas como:

 $(".myInputs").enable(); $("#otherInput").disable(); 

Se você quiser apenas inverter o estado atual (como um comportamento de botão de alternância):

 $("input").prop('disabled', ! $("input").prop('disabled') ); 

Atualização para 2018:

Agora não há necessidade de jQuery e já faz um tempo que document.querySelector ou document.querySelectorAll (para vários elementos) executam quase exatamente o mesmo trabalho que $, além de outros mais explícitos getElementById , getElementsByClassName , getElementsByTagName

Desativando um campo da class “input-checkbox”

 document.querySelector('.input-checkbox').disabled = true; 

ou vários elementos

 document.querySelectorAll('.input-checkbox').forEach(el => el.disabled = true); 

Você pode usar o método prop () do jQuery para desabilitar ou habilitar o elemento de formulário ou controlar dinamicamente usando jQuery. O método prop () requer o jQuery 1.6 e superior.

Exemplo:

  

Existem algumas maneiras de usá-los, você pode ativar / desativar qualquer elemento :

Abordagem 1

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

Abordagem 2

 $("#txtName").attr("disabled", "disabled"); 

Se você estiver usando o jQuery 1.7 ou versão superior, use prop (), em vez de attr ().

 $("#txtName").prop("disabled", "disabled"); 

Se você deseja ativar qualquer elemento, então você só tem que fazer o oposto do que você fez para desativá-lo. No entanto, o jQuery fornece outra maneira de remover qualquer atributo.

Abordagem 1

 $("#txtName").attr("disabled", false); 

Abordagem 2

 $("#txtName").attr("disabled", ""); 

Abordagem 3

 $("#txtName").removeAttr("disabled"); 

Novamente, se você estiver usando o jQuery 1.7 ou versão superior, use prop (), em vez de attr (). Isso é É assim que você habilita ou desabilita qualquer elemento usando jQuery.

Eu usei a resposta @gnarf e adicionei como function

  $.fn.disabled = function (isDisabled) { if (isDisabled) { this.attr('disabled', 'disabled'); } else { this.removeAttr('disabled'); } }; 

Então use assim

 $('#myElement').disable(true); 

2018, sem JQuery (ES6)

Desativar todas as input :

 [...document.querySelectorAll('input')].map(e => e.disabled = true); 

Desativar input com id="my-input"

 document.getElementById('my-input').disabled = true; 

A questão é com o JQuery, é apenas FYI.

   Name:       

No jQuery Mobile:

Para desativar

 $('#someselectElement').selectmenu().selectmenu('disable').selectmenu('refresh', true); $('#someTextElement').textinput().textinput('disable'); 

Para ativar

 $('#someselectElement').selectmenu().selectmenu('enable').selectmenu('refresh', true); $('#someTextElement').textinput('enable'); 

Usar:

 $("input[type=text]").attr('disabled', true);