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'));
});
fatiDev
źródło
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„.

dsgriffin
źródło
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/

Muthu Kumaran
źródło
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ę :)

Umesh Patil
źródło
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
 });
Dhamu
źródło
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
9

Myślę, że próbujesz przełączyć stan wyłączony, w takim przypadku powinieneś użyć tego (z tego pytania ):

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

Oto działające skrzypce.

nicosantangelo
źródło
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);   
        }
    }
 );
});
Er.gaurav soni
źródło
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.

Leniel Maccaferri
źródło
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);
}); 
rap-2-h
źródło
0

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

elem.removeAttribute('disabled');
jdgregson
źródło
elem.removeAttr('disabled');działa dla mnie
Cheng Hui Yuan