Jak usunąć atrybut „disabled” za pomocą jQuery?


394

Najpierw muszę wyłączyć dane wejściowe, a następnie kliknąć link, aby je włączyć.

Do tej pory próbowałem, ale to nie działa.

HTML:

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

jQuery:

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


To pokazuje mi, truea potem falsenic się nie zmienia dla danych wejściowych:

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

2
Nie widzę twojego problemu. O co pytasz?
nicosantangelo

Więc jakie jest pytanie? mam na myśli, z jakimi problemami się mierzysz
Satya Teja

7
Użyj prop () - .prop ('disabled', false)
Jay Blanchard

Jeśli Twój problem został rozwiązany, zaznacz akceptowaną (realną) odpowiedź, aby inni wiedzieli ...
Dhamu

Problem polega na tym, że nie jest wyłączony po
klik

Odpowiedzi:


817

Zawsze używaj prop()metody do włączania lub wyłączania elementów podczas korzystania z jQuery (dlaczego poniżej).

W twoim przypadku byłoby to:

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

Przykład jsFiddle tutaj.


prop()Po co korzystać, kiedy można to zrobić attr()/ removeAttr()?

Zasadniczo prop()należy stosować podczas pobierania lub ustawiania właściwości (takie jak autoplay, checked, disabledi requiredmiędzy innymi).

Używając tego removeAttr(), całkowicie usuwasz disabledsam atrybut - jednocześnie prop()jedynie ustawiasz wartość logiczną właściwości na false.

Chociaż to, co chcesz zrobić, można wykonać za pomocą attr()/ removeAttr(), nie oznacza to, że należy to zrobić (i może powodować dziwne / problematyczne zachowanie, jak w tym przypadku).

Poniższe wyciągi (zaczerpnięte z dokumentacji jQuery dla prop () ) wyjaśniają te punkty bardziej szczegółowo:

„Różnica między atrybutami i właściwościami może być istotna w określonych sytuacjach. Przed jQuery 1.6 .attr()metoda czasami brała pod uwagę wartości właściwości podczas pobierania niektórych atrybutów, co może powodować niespójne zachowanie. Od jQuery 1.6 .prop() metoda zapewnia sposób jawnego pobierania wartości właściwości, podczas gdy .attr()pobiera atrybuty. ”

„Właściwości zasadniczo wpływają na stan dynamiczny elementu DOM bez zmiany serializowanego atrybutu HTML. Przykłady obejmują value właściwość elementów wejściowych, disabledwłaściwość danych wejściowych i przycisków lub checkedwłaściwość pola wyboru. .prop()Metodę należy ustawić, disableda checkedzamiast .attr() metoda. na .val()metoda powinna być stosowana do pobierania i ustawiania value„.


3
Ludzie powinni również wiedzieć przylegać flaga brudny checkedness, które całkowicie przerwy attrvs propdo wyboru: w3.org/TR/html5/forms.html#concept-input-checked-dirty wyjątkiem wewnętrznej jQuery Obejście magii.
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功 法轮功

19
Hmm, .prop („wyłączone”, fałszywe) nie wydaje mi się działać w jednym przycisku - pozostawia atrybut „wyłączony” w tagu bez wartości.
UpTheCreek

3
@UpTheCreek też dla mnie nie działał. Odkryłem jednak, że jest problem zakresu z klauzulą ​​„to” (jak zwykle). W konkretnym przypadku .prop()został wykonany na elemencie wskazanym przez this( this.prop("disabled", false)ale będąc w wywołaniu zwrotnym wiązał się on z niewłaściwym elementem, więc musiałem zrobić wspólne var that = thisobejście. Próba grania z .apply()/ .call()nie działała dobrze; nie wiem dlaczego. Sprawdź console.log(this)dokładnie, czy jest ustawiony na pożądany obiekt, tuż przed wywołaniemthis.prop(...)
Kamafeather

3
Nominuję tę odpowiedź jako kandydata do konwersji do sekcji dokumentu. Jasne, kompletne, dobrze napisane.
Anne Gunn,

4
Używając removeAttr (), całkowicie usuwasz sam wyłączony atrybut - podczas gdy prop () jedynie ustawia podstawową wartość logiczną właściwości na false. Nie wierzę, że to prawda. W HTML sama obecność disabledwłaściwości spowoduje wyłączenie elementu. Na przykład, mając <button disabled="false"></button> opcję nie włącza przycisku, właściwość musi zostać usunięta. Wywołanie $('button').prop('disabled', false);jQuery usunie dla ciebie właściwość, jak zauważyłem w tym codepen (sprawdź, aby zobaczyć usunięcie właściwości).
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

aby usunąć użycie atrybutu wyłączone,

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

i aby dodać wyłączone użycie atrybutu,

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

Cieszyć się :)


4
Lub po prostu element.removeAttribute ('disabled') in vanilla js
Dragos Rusu

16

Użyj tego,

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
Ten naprawdę działa dla mnie. Podpora („niepełnosprawna”, fałszywa) zaskakująco nie działała.
Stefan

@Stefan to samo tutaj! Dowiedziałeś się dlaczego?
Alexander Suraphel

1
Wiem, że jest to starożytny wątek, ale jeśli ktoś nadal ma z tym problem, moim problemem było to, że element był elementem <a>, na którym .prop('disabled', false)nie działa. Zmieniłem go na a <button>i działa teraz
Oliver Nagy


3

Pomyślałem, że możesz łatwo skonfigurować

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

To był jedyny kod, który działał dla mnie:

element.removeProp('disabled')

Zauważ, że tak jest removePropi nie removeAttr.

Używam jQuery 2.1.3tutaj.


12
Z dokumentacji jQuery: Ważne: nie należy używać metody .removeProp () do ustawiania tych właściwości na false. Po usunięciu właściwości natywnej nie można jej ponownie dodać. Aby uzyskać więcej informacji, zobacz .removeProp ().
XanatosLightfiren

2

2018, bez JQuery

Wiem, że pytanie dotyczy JQuery: ta odpowiedź to tylko FYI.

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

0

To pytanie konkretnie wspomina o jQuery, ale jeśli chcesz to osiągnąć bez jQuery, odpowiednikiem waniliowego JavaScript jest:

elem.removeAttribute('disabled');

elem.removeAttr('disabled');działa dla mnie
Cheng Hui Yuan
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.