Desativar / ativar uma entrada com jQuery?

$input.disabled = true;

ou

$input.disabled = "disabled";

Qual é o caminho padrão? E, por outro lado, como você habilita uma entrada desativada?

jQuery 1.6+

Para alterar a disabledpropriedade, você deve usar a .prop()função

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

jQuery 1.5 e abaixo

A .prop()função não existe, mas .attr()é semelhante:

Defina o atributo desativado.

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

Para ativar novamente, o método adequado é usar .removeAttr()

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

Em qualquer versão do jQuery

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

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

A vantagem de usar os métodos .prop()ou .attr()é que você pode definir a propriedade para vários itens selecionados.

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

Nota: Não use este método para remover propriedades nativas como marcada, desativada ou selecionada. Isso removerá a propriedade completamente e, uma vez removida, não poderá ser adicionada novamente ao elemento. Use .prop () para definir essas propriedades como false.

Na verdade, duvido que haja muitos usos legítimos para esse 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" na versão 1.5.

Apenas para novas convenções e para torná-lo 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 do formulário, como entrada ou área de texto. O Jquery ajuda você a fazer isso facilmente com a configuração do atributo desativado como "desativado". Por exemplo:

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

Para habilitar o elemento desativado, você precisa remover o atributo "disabled" desse elemento ou esvaziar sua string. 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 no 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ê deseja apenas inverter o estado atual (como o comportamento de um botão de alternância):

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

Existem várias 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, basta 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ê ativa ou desativa qualquer elemento usando o jQuery.

Atualização para 2018:

Agora não há necessidade de jQuery e tem sido um tempo desde que document.querySelector ou document.querySelectorAll(de vários elementos) fazer quase exatamente o mesmo trabalho como $, mais os mais explícitos getElementById, getElementsByClassName,getElementsByTagName

Desativando um campo da classe "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 jQuery prop () para desativar ou ativar o elemento do formulário ou controlar dinamicamente usando o jQuery. O método prop () requer o jQuery 1.6 e superior.

Exemplo:

<script type="text/javascript">
        $(document).ready(function(){
            $('form input[type="submit"]').prop("disabled", true);
            $(".agree").click(function(){
                if($(this).prop("checked") == true){
                    $('form input[type="submit"]').prop("disabled", false);
                }
                else if($(this).prop("checked") == false){
                    $('form input[type="submit"]').prop("disabled", true);
                }
            });
        });
    </script>

Desativar:

$('input').attr('readonly', true); // Disable it.
$('input').addClass('text-muted'); // Gray it out with bootstrap.

Habilitar:

$('input').attr('readonly', false); // Enable it.
$('input').removeClass('text-muted'); // Back to normal color with bootstrap.

Desative true para o tipo de entrada:

No caso de um tipo de entrada específico (por exemplo, entrada de tipo de texto )

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

Para todo tipo de entrada

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

isso funciona para mim

$("#values:input").attr("disabled",true);
$("#values:input").attr("disabled",false);

Eu usei a resposta @gnarf e a adicionei como função

   $.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 tudo input:

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

Desativar inputcomid="my-input"

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

A questão é com JQuery, é apenas para sua informação.

Abordagem 4 (esta é a extensão da resposta do codificador selvagem )

txtName.disabled=1     // 0 for enable

<input id="txtName">

Use assim,

 $( "#id" ).prop( "disabled", true );

 $( "#id" ).prop( "disabled", false );

<html>
<body>

Name: <input type="text" id="myText">



<button onclick="disable()">Disable Text field</button>
<button onclick="enable()">Enable Text field</button>

<script>
function disable() {
    document.getElementById("myText").disabled = true;
}
function enable() {
    document.getElementById("myText").disabled = false;
}
</script>

</body>
</html>

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');