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

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."


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/


42

para remover o uso de atributo desativado,

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

e para adicionar o uso de atributo desativado,

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

Desfrutar :)


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

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

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.


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

0

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

elem.removeAttribute('disabled');

elem.removeAttr('disabled');trabalha para mim
Cheng Hui Yuan
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.