Remover o atributo desativado usando o JQuery?

Eu tenho que desabilitar as inputs primeiro e, em seguida, clique em um link para ativá-las.

Isso é o que eu tentei até agora, mas não funciona:

HTML:

 

jQuery:

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

Isso me mostra true e depois false mas nada muda para as inputs:

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

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

No seu caso, seria:

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

Exemplo do jsFiddle aqui.


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

Basicamente, prop() deve ser usado ao obter ou configurar propriedades (como autoplay , checked , disabled e required entre outros).

Usando removeAttr() , você está removendo completamente o próprio atributo disabled – enquanto prop() está meramente definindo o valor booleano subjacente da propriedade como false.

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

Os seguintes extratos (extraídos da documentação do jQuery para prop () ) explicam esses pontos em maior detalhe:

“A diferença entre atributos e propriedades pode ser importante em situações específicas. Antes do jQuery 1.6, o método .attr() às vezes levava em consideração os valores de propriedade 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 de propriedades, enquanto .attr() recupera atributos. ”

“As propriedades geralmente afetam o estado dynamic de um elemento DOM sem alterar o atributo HTML serializado. Os exemplos incluem a propriedade value de elementos de input, a propriedade disabled de inputs e botões ou a propriedade checked de uma checkbox de seleção. O método .prop() deve ser usado para definir disabled e checked vez do método .attr() . O método .val() deve ser usado para obter e definir o value . ”

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

http://jsfiddle.net/ZwHfY/

para remover o uso de atributos desativados,

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

e para adicionar o atributo desativado,

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

Apreciar 🙂

Use assim,

HTML:

  
edit

JS:

  $('#edit').click(function(){ // click to $('.inputDisabled').attr('disabled',false); // removing disabled in this class }); 

Eu acho que você está tentando alternar o estado desativado, no caso você deve usar isso ( desta pergunta ):

 $(".inputDisabled").prop('disabled', function (_, val) { return ! val; }); 

Aqui está um violino de trabalho.

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

 element.removeProp('disabled') 

Note que é removeProp e não removeAttr .

Estou usando o jQuery 2.1.3 aqui.

Pensei que você pode facilmente configurar

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

Esta questão menciona especificamente o jQuery, mas se você estiver procurando realizar isso sem o jQuery, o equivalente no JavaScript vanilla é:

 elem.removeAttribute('disabled'); 

2018, sem JQuery

Eu sei que a questão é sobre JQuery: esta resposta é apenas FYI.

 document.getElementById('edit').addEventListener(event => { event.preventDefault(); [...document.querySelectorAll('.inputDisabled')].map(e => e.disabled = false); });