Come rimuovere l'attributo "disabilitato" usando jQuery?


394

Devo prima disabilitare gli input e poi fare clic su un link per abilitarli.

Questo è quello che ho provato finora, ma non funziona.

HTML:

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

jQuery:

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


Questo mi mostra truee poi falsenon cambia nulla per gli input:

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

2
Non vedo il tuo problema. Cosa stai chiedendo?
Nicosantangelo,

Quindi qual è la domanda? intendo quale problema stai affrontando
Satya Teja,

7
Usa prop () - .prop ('disabled', false)
Jay Blanchard,

Se il problema è stato risolto, contrassegnare la risposta (reale) accettata affinché altri lo sappiano ...
Dhamu,

il problema è che non è disabilitato dopo il clic
fatiDev del

Risposte:


817

Utilizzare sempre il prop()metodo per abilitare o disabilitare gli elementi quando si utilizza jQuery (vedere di seguito per il perché).

Nel tuo caso, sarebbe:

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

Esempio jsFiddle qui.


Perché usare prop()quando potresti usare attr()/ removeAttr()per fare questo?

Fondamentalmente, prop()dovrebbe essere usato quando ottenere o impostare le proprietà (ad esempio autoplay, checked, disablede requiredtra gli altri).

Usando removeAttr(), stai rimuovendo completamente l' disabledattributo stesso - mentre stai prop()semplicemente impostando il valore booleano sottostante della proprietà su false.

Mentre quello che vuoi fare può essere fatto usando attr()/ removeAttr(), ciò non significa che dovrebbe essere fatto (e può causare comportamenti strani / problematici, come in questo caso).

I seguenti estratti (presi dalla documentazione di jQuery per prop () ) spiegano questi punti in modo più dettagliato:

"La differenza tra attributi e proprietà può essere importante in situazioni specifiche. Prima di jQuery 1.6, il .attr()metodo talvolta prendeva in considerazione i valori delle proprietà durante il recupero di alcuni attributi, il che potrebbe causare comportamenti incoerenti. A partire da jQuery 1.6, il .prop() metodo fornisce un modo per recuperare esplicitamente valori di proprietà, mentre .attr()recupera gli attributi. "

"Le proprietà generalmente influenzano lo stato dinamico di un elemento DOM senza modificare l'attributo HTML serializzato. Gli esempi includono la value proprietà degli elementi di input, la disabledproprietà di input e pulsanti o la checkedproprietà di una casella di controllo. Il .prop()metodo dovrebbe essere usato per impostare disablede checkedinvece di il .attr() metodo. Il .val()metodo dovrebbe essere usato per ottenere e impostare value".


3
Le persone dovrebbero anche sapere circa il flag di checkness sporco, che si rompe completamente attrrispetto propalle caselle di controllo: w3.org/TR/html5/forms.html#concept-input-checked-dirty tranne per la magia interna di soluzione alternativa jQuery.
Ciro Santilli 6 冠状 病 六四 事件 法轮功

19
Hmm, .prop ("disabled", false) non sembra funzionare per me in un pulsante - lascia l'attributo "disabled" nel tag senza valore.
UpTheCreek

3
@UpTheCreek non funzionava anche per me. Ma ho scoperto di essere un problema di portata con la clausola 'this' (come al solito). Nel caso specifico è .prop()stato eseguito sull'elemento puntato da this( this.prop("disabled", false), ma essere in un callback era vincolante per l'elemento sbagliato, quindi ho dovuto fare la var that = thissoluzione comune . Provare a giocare con .apply()/ .call()non funzionava bene; Non lo so perché. Ricontrolla con un console.log(this)se è impostato sull'oggetto desiderato, appena prima di chiamarethis.prop(...)
Kamafeather

3
Nomino questa risposta come candidato per la conversione nella sezione del documento. Chiaro, completo, ben scritto.
Anne Gunn,

4
Usando removeAttr (), si rimuove completamente l'attributo disabilitato stesso - mentre prop () sta semplicemente impostando il valore booleano sottostante della proprietà su false. Non credo sia vero. In HTML, la semplice presenza della disabledproprietà disabiliterà l'elemento. Ad esempio, <button disabled="false"></button> se non si abilita il pulsante, è necessario rimuovere la proprietà. Chiamando $('button').prop('disabled', false);jQuery rimuoverai la proprietà per te, come ho osservato in questo codice (controlla per vedere la rimozione della proprietà).
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

per rimuovere l'uso dell'attributo disabilitato,

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

e per aggiungere l'uso di attributi disabilitati,

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

Godere :)


4
O semplicemente element.removeAttribute ('disabled') in vanilla js
Dragos Rusu

16

Usa così,

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
Questo in realtà funziona per me. L'elica ("disabilitato", falso) sorprendentemente non ha funzionato.
Stefan,

@Stefan stessa cosa qui! Hai scoperto perché?
Alexander Suraphel,

1
So che questo è un filo antico, ma se qualcuno ancora lotta con questo, il mio problema era che l'elemento era un <a>, sul quale .prop('disabled', false)non funziona. L'ho cambiato in un <button>e funziona ora
Oliver Nagy,


3

Pensato che puoi facilmente impostare

$(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

Questo è stato l'unico codice che ha funzionato per me:

element.removeProp('disabled')

Nota che è removePrope non removeAttr.

Sto usando jQuery 2.1.3qui.


12
Dalla documentazione di jQuery: Importante: il metodo .removeProp () non deve essere utilizzato per impostare queste proprietà su false. Una volta rimossa una proprietà nativa, non può essere aggiunta di nuovo. Vedi .removeProp () per maggiori informazioni.
XanatosLightfiren,

2

2018, senza JQuery

So che la domanda riguarda JQuery: questa risposta è solo FYI.

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

0

Questa domanda menziona specificamente jQuery, ma se stai cercando di farlo senza jQuery, l'equivalente in JavaScript vaniglia è:

elem.removeAttribute('disabled');

elem.removeAttr('disabled');funziona per me
Cheng Hui Yuan il
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.