Como remover o atributo "desativado" usando o jQuery?

394

Preciso desabilitar as entradas primeiro e depois clicar no link para habilitá-las.

Isto é o que eu tentei até agora, mas não funciona.

HTML:

<input type="text" disabled="disabled" class="inputDisabled" value="">

jQuery:

$("#edit").click(function(event){
   event.preventDefault();
   $('.inputDisabled').removeAttr("disabled")
});


Isso me mostra truee, em seguida, falsemas nada muda para as entradas:

$("#edit").click(function(event){
   alert('');
   event.preventDefault();
   alert($('.inputDisabled').attr('disabled'));
   $('.inputDisabled').removeAttr("disabled");
   alert($('.inputDisabled').attr('disabled'));
});
fatiDev
fonte
2
Eu não vejo o seu problema. O que você está perguntando?
Nicosantangelo
Então, qual é a pergunta? eu quero dizer que problema você está enfrentando
Satya Teja 29/11
7
Use prop () - .prop ('disabled', false)
Jay Blanchard
Se o seu problema foi resolvido, marque a resposta (Real) aceita para que outros saibam ... #
314 Dhamu
o problema é que ele não é desativado após o clique
fatiDev

Respostas:

817

Sempre use o prop()método para ativar ou desativar elementos ao usar o jQuery (veja abaixo o porquê).

No seu caso, seria:

$("#edit").click(function(event){
   event.preventDefault();
   $('.inputDisabled').prop("disabled", false); // Element(s) are now enabled.
});

Exemplo de jsFiddle aqui.


Por que usar prop()quando você pode usar attr()/ removeAttr()para fazer isso?

Basicamente, prop()deve ser usado quando obter ou definir propriedades (como autoplay, checked, disablede requiredentre outros).

Ao usar removeAttr(), você remove completamente o disabledpróprio atributo - enquanto prop()apenas define o valor booleano subjacente da propriedade como false.

Embora o que você queira fazer possa ser feito usando attr()/ removeAttr(), isso não significa que deve ser feito (e pode causar um comportamento estranho / problemático, como neste caso).

As seguintes extrações (extraídas da documentação do jQuery para prop () ) explicam esses pontos com mais detalhes:

"A diferença entre atributos e propriedades pode ser importante em situações específicas. Antes do jQuery 1.6, o .attr()método às vezes considerava os valores das propriedades ao recuperar alguns atributos, o que poderia causar comportamento inconsistente. A partir do jQuery 1.6, o .prop() método fornece uma maneira de recuperar explicitamente valores da propriedade, enquanto .attr()recupera atributos ".

"As propriedades geralmente afetam o estado dinâmico de um elemento DOM sem alterar o atributo HTML serializado. Os exemplos incluem a value propriedade de elementos de entrada, a disabledpropriedade de entradas e botões ou a checkedpropriedade de uma caixa de seleção. O .prop()método deve ser usado para definir disablede em checkedvez de o .attr() método. o .val()método deve ser usado para obter e definir value."

dsgriffin
fonte
3
As pessoas também devem saber sobre o sinalizador de verificação sujo, que quebra completamente o attrvs propnas caixas de seleção: w3.org/TR/html5/forms.html#concept-input-checked-dirty, exceto pela mágica interna da solução alternativa do jQuery.
Ciro Santilli escreveu
19
Hmm, .prop ("disabled", false) parece não funcionar para mim em um botão - deixa o atributo 'disabled' na tag sem valor.
UpTheCreek # 1
3
@UpTheCreek também não estava funcionando para mim. Mas descobri que era um problema de escopo com a cláusula 'this' (como de costume). No caso específico, .prop()foi executado no elemento apontado por this( this.prop("disabled", false), mas estar em um retorno de chamada era vinculativo ao elemento errado, por isso tive que fazer a var that = thissolução comum . Tentar brincar com .apply()/ .call()não estava funcionando bem; não sei . por isso verifique com um console.log(this)se estiver definido para o seu objeto desejado, antes de chamarthis.prop(...)
Kamafeather
3
Nomeio esta resposta como candidata à conversão na seção de documentos. Claro, completo, bem escrito.
Anne Gunn
4
Ao usar removeAttr (), você remove completamente o próprio atributo desativado - enquanto prop () está apenas configurando o valor booleano subjacente da propriedade como false. Eu não acredito que isso seja verdade. Em HTML, a mera presença da disabledpropriedade desabilitará o elemento. Por exemplo, tendo um <button disabled="false"></button> não ativará o botão, a propriedade deverá ser removida. Ao chamar o $('button').prop('disabled', false);jQuery, você removerá a propriedade para você, como observei neste código (inspecione para ver a remoção da propriedade).
Naftali
42
<input type="text" disabled="disabled" class="inputDisabled" value="">
​<button id="edit">Edit</button>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

$("#edit").click(function(event){
    event.preventDefault();
    $('.inputDisabled').removeAttr("disabled")
});​

http://jsfiddle.net/ZwHfY/

Muthu Kumaran
fonte
42

para remover o uso de atributo desativado,

 $("#elementID").removeAttr('disabled');

e para adicionar o uso de atributo desativado,

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

Desfrutar :)

Umesh Patil
fonte
4
Ou apenas element.removeAttribute ('disabled') em vanilla js
Dragos Rusu
16

Use assim,

HTML:

<input type="text" disabled="disabled" class="inputDisabled" value="">

<div id="edit">edit</div>

JS:

 $('#edit').click(function(){ // click to
            $('.inputDisabled').attr('disabled',false); // removing disabled in this class
 });
Dhamu
fonte
6
Este está realmente trabalhando para mim. O suporte ('desativado', falso) surpreendentemente não funcionou.
Stefan
@ Stefan mesma coisa aqui! Você descobriu o porquê?
Alexander Suraphel
11
Eu sei que esse é um tópico antigo, mas se alguém ainda luta com isso, meu problema é que o elemento era um <a>, no qual .prop('disabled', false)não funciona. Eu mudei para um <button>e ele funciona agora
Oliver Nagy
3

Pensei que você pode configurar facilmente

$(function(){
$("input[name^=radio_share]").click
(
    function()
    {
        if($(this).attr("id")=="radio_share_dependent")
        {
            $(".share_dependent_block input, .share_dependent_block select").prop("disabled",false);   
        }
        else
        {
            $(".share_dependent_block input, .share_dependent_block select").prop("disabled",true);   
        }
    }
 );
});
Er.gaurav soni
fonte
3

Este foi o único código que funcionou para mim:

element.removeProp('disabled')

Note que é removePrope não removeAttr.

Estou usando jQuery 2.1.3aqui.

Leniel Maccaferri
fonte
12
Na documentação do jQuery: Importante: o método .removeProp () não deve ser usado para definir essas propriedades como false. Depois que uma propriedade nativa é removida, ela não pode ser adicionada novamente. Veja .removeProp () para mais informações.
XanatosLightfiren
2

2018, sem JQuery

Eu sei que a pergunta é sobre JQuery: esta resposta é apenas para sua informação.

document.getElementById('edit').addEventListener(event => {
    event.preventDefault();
    [...document.querySelectorAll('.inputDisabled')].map(e => e.disabled = false);
}); 
rap-2-h
fonte
0

Esta pergunta menciona especificamente o jQuery, mas se você deseja fazer isso sem o jQuery, o equivalente no JavaScript vanilla é:

elem.removeAttribute('disabled');
jdgregson
fonte
elem.removeAttr('disabled');trabalha para mim
Cheng Hui Yuan