Wie entferne ich das Attribut "deaktiviert" mit jQuery?


394

Ich muss zuerst die Eingaben deaktivieren und dann auf einen Link klicken, um sie zu aktivieren.

Das habe ich bisher versucht, aber es funktioniert nicht.

HTML:

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

jQuery:

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


Das zeigt mir trueund dann falseändert sich aber nichts an den Eingaben:

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

2
Ich sehe dein Problem nicht. Was fragst du?
Nicosantangelo

Was ist die Frage? Ich meine, mit welchem ​​Problem Sie konfrontiert sind
Satya Teja

7
Verwenden Sie prop () - .prop ('deaktiviert', falsch)
Jay Blanchard

Wenn Ihr Problem gelöst ist,
kreuzen

Das Problem ist, dass es nach dem Clic
FatiDev

Antworten:


817

Verwenden Sie immer die prop()Methode, um Elemente zu aktivieren oder zu deaktivieren, wenn Sie jQuery verwenden (siehe unten, warum).

In Ihrem Fall wäre es:

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

jsFiddle Beispiel hier.


Warum Gebrauch , prop()wenn Sie könnten nutzen attr()/ removeAttr()dies zu tun?

Grundsätzlich prop()soll verwendet werden , wenn Abrufen oder Festlegen Eigenschaften (wie autoplay, checked, disabledund requiredunter anderem).

Durch die Verwendung von removeAttr()entfernen Sie das disabledAttribut selbst vollständig, während Sie prop()lediglich den zugrunde liegenden booleschen Wert der Eigenschaft auf false setzen.

Während das, was Sie tun mögen , kann getan werden , mit attr()/ removeAttr(), bedeutet es nicht , es sollte (und kann seltsames / problematisches Verhalten führen, wie in diesem Fall) erfolgen.

Die folgenden Auszüge (aus der jQuery-Dokumentation für prop () ) erläutern diese Punkte ausführlicher:

"Der Unterschied zwischen Attributen und Eigenschaften kann in bestimmten Situationen wichtig sein. Vor jQuery 1.6 .attr()berücksichtigte die Methode beim Abrufen einiger Attribute manchmal Eigenschaftswerte, was zu inkonsistentem Verhalten führen kann. Ab jQuery 1.6 bietet die .prop() Methode eine Möglichkeit zum expliziten Abrufen Eigenschaftswerte, während .attr()Attribute abgerufen werden. "

"Eigenschaften wirken sich im Allgemeinen auf den dynamischen Status eines DOM-Elements aus, ohne das serialisierte HTML-Attribut zu ändern. Beispiele sind die value Eigenschaft von Eingabeelementen, die disabledEigenschaft von Eingaben und Schaltflächen oder die checkedEigenschaft eines Kontrollkästchens. Die .prop()Methode sollte zum Festlegen disabledund checkedanstelle von verwendet werden die .attr() Methode. Die .val()Methode sollte zum Abrufen und Einstellen verwendet werden value. "


3
Die Menschen sollten auch wissen , stoßen die schmutzige checkedness Flagge, die vollständig bricht attrvs propfür Kontrollkästchen: w3.org/TR/html5/forms.html#concept-input-checked-dirty außer für interne jQuery Magie umgehen.
Ciro Santilli 6 冠状 病. 事件 6

19
Hmm, .prop ("deaktiviert", falsch) scheint für mich in einer Schaltfläche nicht zu funktionieren - lässt das Attribut "deaktiviert" im Tag ohne Wert.
UpTheCreek

3
@UpTheCreek hat auch bei mir nicht funktioniert. Aber ich habe festgestellt, dass es sich bei der 'this'-Klausel (wie üblich) um ein Umfangsproblem handelt. In dem speziellen Fall .prop()wurde das Element ausgeführt, auf das verwiesen wird this( this.prop("disabled", false)aber da es sich um einen Rückruf handelt, war es an das falsche Element gebunden, sodass ich die allgemeine var that = thisProblemumgehung durchführen musste. Der Versuch, mit .apply()/ zu spielen, .call()funktionierte nicht gut, ich weiß es nicht Warum. Überprüfen Sie noch einmal, console.log(this)ob es auf Ihr gewünschtes Objekt eingestellt ist, bevor Sie anrufenthis.prop(...)
Kamafeather

3
Ich nominiere diese Antwort als Kandidaten für die Umstellung auf den Dokumentabschnitt. Klar, vollständig, gut geschrieben.
Anne Gunn

4
Mit removeAttr () entfernen Sie das deaktivierte Attribut selbst vollständig, während prop () lediglich den zugrunde liegenden booleschen Wert der Eigenschaft auf false setzt. Ich glaube nicht, dass das wahr ist. In HTML disabledwird das Element durch das bloße Vorhandensein der Eigenschaft deaktiviert. Wenn beispielsweise a <button disabled="false"></button> die Schaltfläche nicht aktiviert, muss die Eigenschaft entfernt werden. Wenn Sie $('button').prop('disabled', false);jQuery aufrufen, wird die Eigenschaft für Sie entfernt, wie ich in diesem Codepen festgestellt habe (überprüfen Sie, ob die Eigenschaft entfernt wurde).
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

um die Verwendung deaktivierter Attribute zu entfernen,

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

und um die Verwendung deaktivierter Attribute hinzuzufügen,

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

Genießen :)


4
Oder einfach element.removeAttribute ('disabled') in vanilla js
Dragos Rusu

16

Verwenden Sie so,

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
Dieser arbeitet tatsächlich für mich. Die Requisite ('deaktiviert', falsch) hat überraschenderweise nicht funktioniert.
Stefan

@Stefan das gleiche hier! Hast du herausgefunden warum?
Alexander Suraphel

1
Ich weiß, dass dies ein uralter Thread ist, aber wenn jemand immer noch damit zu kämpfen hat, war mein Problem, dass das Element ein war <a>, bei dem .prop('disabled', false)es nicht funktioniert. Ich habe es in a geändert <button>und es funktioniert jetzt
Oliver Nagy


3

Dachte das kannst du einfach einrichten

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

Dies war der einzige Code, der für mich funktioniert hat:

element.removeProp('disabled')

Beachten Sie, dass es ist removePropund nicht removeAttr.

Ich benutze jQuery 2.1.3hier.


12
Aus der jQuery-Dokumentation: Wichtig: Die Methode .removeProp () sollte nicht verwendet werden, um diese Eigenschaften auf false zu setzen. Sobald eine native Eigenschaft entfernt wurde, kann sie nicht mehr hinzugefügt werden. Weitere Informationen finden Sie unter .removeProp ().
XanatosLightfiren

2

2018 ohne JQuery

Ich weiß, dass es sich bei der Frage um JQuery handelt: Diese Antwort ist nur zu Ihrer Information.

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

0

In dieser Frage wird speziell jQuery erwähnt. Wenn Sie dies jedoch ohne jQuery erreichen möchten, lautet das Äquivalent in Vanille-JavaScript:

elem.removeAttribute('disabled');

elem.removeAttr('disabled');arbeitet für mich
Cheng Hui Yuan
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.