javascript remove o atributo “disabled” da entrada html

100

Como posso remover o atributo "disabled" de uma entrada HTML usando javascript?

<input id="edit" disabled>

em onClick, quero que minha tag de entrada não consista no atributo "disabled".

javascript input attributes Jam Ville
fonte
possível duplicata de Como desabilito um botão de envio quando a caixa de seleção está desmarcada? duplicar porque essa pergunta explica como alternar, portanto, como habilitar e desabilitar conforme solicitado aqui.
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功

Respostas:

198

Defina a disabledpropriedade do elemento como false:

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

Se você estiver usando jQuery, o equivalente seria:

$('#my-input-id').prop('disabled', false);

Para vários campos de entrada, você pode acessá-los por classe:

var inputs = document.getElementsByClassName('my-input-class');
for(var i = 0; i < inputs.length; i++) {
    inputs[i].disabled = false;
}

Onde documentpoderia ser substituído por um formulário, por exemplo, para encontrar apenas os elementos dentro desse formulário. Você também pode usar getElementsByTagName('input')para obter todos os elementos de entrada. Em sua foriteração, você teria que verificar isso inputs[i].type == 'text'.

David Hedlund
fonte
1
sim, funciona, mas eu tive muita entrada para fazer a mesma coisa. Existe algum atalho para isso? isso é possível ('id1', 'id2', 'id3')?
Jam Ville
1
sim, funciona! obrigado. a propósito, há um erro de digitação em geElementsBy. Achei que não funcionaria :)
Jam Ville
34

Por que não apenas remover esse atributo?

  1. vanilla JS: elem.removeAttribute('disabled')
  2. jQuery: elem.removeAttr('disabled')
Dragos Rusu
fonte
1
jQuery("#success").removeAttr("disabled");- isso funciona para mim, obrigado!
aftamat4ik
vanilla js, removeAttribute não é compatível com o IE.
MarCrazyness
@MarCrazyness removeAttributeparece ser compatível com o IE11. Está marcado como " unknownposso usar", então abri o IE e verifiquei se funciona. É verdade.
Artur
2

Para definir o disabledcomo falso usando a namepropriedade da entrada:

document.myForm.myInputName.disabled = false;
Henry Hedden
fonte
1

A melhor resposta é apenas removeAttribute

element.removeAttribute("disabled");
Nigam Harshit
fonte
no firefox, como nowadys (2020), o atributo disabled está ativo embora esteja definido como false. o firefox está apenas procurando o próprio atributo. então a melhor solução é adicioná-lo ou removê-lo para o firefox, e isso, claro, funciona para todos os principais navegadores.
Raffael Meier
0 
method 1 <input type="text" onclick="this.disabled=false;" disabled>
<hr>
method 2 <input type="text" onclick="this.removeAttribute('disabled');" disabled>
<hr>
method 3 <input type="text" onclick="this.removeAttribute('readonly');" readonly>

o código das respostas anteriores não parece funcionar no modo embutido, mas há uma solução alternativa: método 3.

veja a demonstração https://jsfiddle.net/eliz82/xqzccdfg/

crisc82
fonte
Esses dois não estão funcionando para mim. method 1 <input type="text" onclick="this.disabled=false;" disabled> <hr> method 2 <input type="text" onclick="this.removeAttribute('disabled');" disabled>
Ambal Mani
1
Você votou contra isso só porque não sabe como ler uma resposta corretamente? O método 1 é da resposta de David Hedlund, o método 2 é da resposta de Dragos Rusu. Uma vez que um elemento é desabilitado, "onclick" naquele elemento específico não funcionará mais no modo embutido (eu não testei o modo js externo). A única maneira de simular "desativado" é uma pequena solução alternativa usando o atributo somente leitura e alguns css. OU crie um elemento externo "onclick" como um botão que permitirá a entrada usando os métodos 1 e 2 (que funcionará, é claro).
crisc82