Eingabe mit jQuery deaktivieren / aktivieren?

Antworten:

3810

jQuery 1.6+

Um die disabledEigenschaft zu ändern , sollten Sie die .prop()Funktion verwenden.

$("input").prop('disabled', true);
$("input").prop('disabled', false);

jQuery 1.5 und niedriger

Die .prop()Funktion existiert nicht, funktioniert aber .attr()ähnlich:

Legen Sie das deaktivierte Attribut fest.

$("input").attr('disabled','disabled');

Zum erneuten Aktivieren ist die richtige Methode zu verwenden .removeAttr()

$("input").removeAttr('disabled');

In jeder Version von jQuery

Sie können sich immer auf das eigentliche DOM-Objekt verlassen und sind wahrscheinlich etwas schneller als die beiden anderen Optionen, wenn Sie nur mit einem Element arbeiten:

// assuming an event handler thus 'this'
this.disabled = true;

Der Vorteil der Verwendung der Methoden .prop()oder .attr()besteht darin, dass Sie die Eigenschaft für eine Reihe ausgewählter Elemente festlegen können.


Hinweis: In 1.6 gibt es eine .removeProp()Methode, die sich sehr ähnlich anhört removeAttr(), die jedoch NICHT für native Eigenschaften wie 'disabled' Auszug aus der Dokumentation verwendet werden sollte:

Hinweis: Verwenden Sie diese Methode nicht, um native Eigenschaften wie aktiviert, deaktiviert oder ausgewählt zu entfernen. Dadurch wird die Eigenschaft vollständig entfernt und kann nach dem Entfernen nicht mehr zum Element hinzugefügt werden. Verwenden Sie .prop (), um diese Eigenschaften stattdessen auf false zu setzen.

Tatsächlich bezweifle ich, dass es viele legitime Verwendungszwecke für diese Methode gibt. Boolesche Requisiten werden so ausgeführt, dass Sie sie auf false setzen sollten, anstatt sie wie ihre "Attribut" -Partner in 1.5 zu "entfernen"

Zwerg
quelle
9
Denken Sie außerdem daran, dass Sie, wenn Sie ALLE Formulareingabesteuerelemente deaktivieren möchten, inkl. Kontrollkästchen, Radios, Textbereiche usw. - Sie müssen ':input'nicht nur auswählen 'input'. Letzteres wählt nur tatsächliche <input> -Elemente aus.
Cornel Masson
35
@CornelMasson input,textarea,select,buttonist etwas besser zu verwenden als :input- :inputda ein Selektor ziemlich ineffizient ist, weil er *jedes Element auswählen und dann durchlaufen und nach Tagname filtern muss - wenn Sie die 4 Tagname-Selektoren direkt übergeben, ist es VIEL schneller. Auch :inputist kein Standard-CSS-Selektor, so dass alle möglichen Leistungssteigerungen querySelectorAllverloren gehen
Gnarf
3
Verhindert dies nur, dass der Benutzer darauf zugreift, oder entfernt er es tatsächlich aus der Webanforderung?
OneChillDude
4
Die Verwendung .removeProp("disabled")von verursachte bei einigen Browsern wie Chrome das Problem, dass "Eigenschaften vollständig entfernt und nicht erneut hinzugefügt werden", wie von @ThomasDavidBaker hervorgehoben, während es bei einigen wie Firefox einwandfrei funktionierte. Wir sollten hier wirklich vorsichtig sein. Verwenden Sie .prop("disabled",false)stattdessen immer
Sandeepan Nath
6
Weder .prop noch .attr reichen aus, um Ankerelemente zu deaktivieren. .prop wird das 'Steuerelement' nicht einmal ausgrauen (.attr tut es, aber das href ist immer noch aktiv). Sie müssen auch einen Klickereignishandler hinzufügen, der PreventDefault () aufruft.
Jeff Lowery
61

Nur um neue Konventionen zu erreichen und es in Zukunft anpassungsfähig zu machen (es sei denn, die Dinge ändern sich mit ECMA6 drastisch (????):

$(document).on('event_name', '#your_id', function() {
    $(this).removeAttr('disabled');
});

und

$(document).off('event_name', '#your_id', function() {
    $(this).attr('disabled','disabled');   
});
Geekbuntu
quelle
12
Jikes! Warum $(document).on('event_name', '#your_id', function() {...})statt $('#your_id').on('event_name', function() {...}). Wie in der Dokumentation zu jQuery .on () beschrieben, verwendet die erstere die Delegierung und lauscht allen event_name Ereignissen, die aufblasen , documentund überprüft sie auf Übereinstimmung #your_id. Letzterer hört $('#your_id')nur auf Ereignisse und das skaliert besser.
Peter V. Mørch
23
Ersteres funktioniert für Elemente, die zu einem beliebigen Zeitpunkt in das DOM eingefügt werden, letzteres nur für die zu diesem Zeitpunkt vorhandenen Elemente.
Crazymykl
1
@crazymykl Richtig, aber Sie sollten keine Elemente mit einer ID hinzufügen, die bereits auf Ihrer Seite vorhanden ist.
September
33
    // Disable #x
    $( "#x" ).prop( "disabled", true );
    // Enable #x
    $( "#x" ).prop( "disabled", false );

Manchmal müssen Sie das Formularelement wie Eingabe oder Textbereich deaktivieren / aktivieren. Jquery hilft Ihnen dabei, dies einfach zu erreichen, indem Sie das Attribut disabled auf "disabled" setzen. Zum Beispiel:

  //To disable 
  $('.someElement').attr('disabled', 'disabled');

Um ein deaktiviertes Element zu aktivieren, müssen Sie das Attribut "disabled" aus diesem Element entfernen oder die Zeichenfolge leeren. Zum Beispiel:

//To enable 
$('.someElement').removeAttr('disabled');

// OR you can set attr to "" 
$('.someElement').attr('disabled', '');

Siehe: http://garmoncheg.blogspot.fr/2011/07/how-to-disableenable-element-with.html

Harini Sekar
quelle
13
$("input")[0].disabled = true;

oder

$("input")[0].disabled = false;
Sajjad Shirazy
quelle
2
Natürlich stellt die Frage nach jQuery und dies ändert den Status in einfachem JavaScript, aber es funktioniert.
basic6
1
Dies ändert den Status in JavaScript, verwendet jedoch weiterhin einen jQuery-Selektor, um die erste Eingabe abzurufen.
cjsimon
3
Aber ich glaube nicht, dass wir hier eine Enzyklopädie von jquery machen. Wenn eine Antwort funktioniert, ist es gut
Sajjad Shirazy
8

Sie können dies irgendwo global in Ihren Code einfügen:

$.prototype.enable = function () {
    $.each(this, function (index, el) {
        $(el).removeAttr('disabled');
    });
}

$.prototype.disable = function () {
    $.each(this, function (index, el) {
        $(el).attr('disabled', 'disabled');
    });
}

Und dann können Sie Dinge schreiben wie:

$(".myInputs").enable();
$("#otherInput").disable();
Nicu Surdu
quelle
3
Während das Umschließen der Funktionalität praktisch ist, sollten Sie die Eigenschaft verwendet haben propund nicht attr mit disabledihr, damit sie ordnungsgemäß funktioniert (vorausgesetzt, jQuery 1.6 oder höher).
Gone Coding
1
@TrueBlueAussie Was ist der Nachteil der Verwendung attr? Ich benutze den obigen Code in einigen Projekten und soweit ich mich erinnere, funktioniert er in Ordnung
Nicu Surdu
1
Die offensichtlichen Ausnahmen sind Steuerelemente mit Eigenschaften hinter den Kulissen. Das bekannteste ist das checkedEigentum von Kontrollkästchen. Die Verwendung attrführt nicht zum gleichen Ergebnis.
Gone Coding
7

Wenn Sie nur den aktuellen Status invertieren möchten (wie bei einem Umschalttastenverhalten):

$("input").prop('disabled', ! $("input").prop('disabled') );
daVe
quelle
1
danke, ich habe das gleiche für den Umschalter, den es ist; $ ("Eingabe"). prop ('deaktiviert', Funktion (i, v) {return! v;});
Floww
5

Es gibt viele Möglichkeiten, mit denen Sie jedes Element aktivieren / deaktivieren können :

Ansatz 1

$("#txtName").attr("disabled", true);

Ansatz 2

$("#txtName").attr("disabled", "disabled");

Wenn Sie jQuery 1.7 oder eine höhere Version verwenden, verwenden Sie prop () anstelle von attr ().

$("#txtName").prop("disabled", "disabled");

Wenn Sie ein Element aktivieren möchten, müssen Sie nur das Gegenteil von dem tun, was Sie getan haben, um es zu deaktivieren. JQuery bietet jedoch eine andere Möglichkeit, Attribute zu entfernen.

Ansatz 1

$("#txtName").attr("disabled", false);

Ansatz 2

$("#txtName").attr("disabled", "");

Ansatz 3

$("#txtName").removeAttr("disabled");

Wenn Sie jQuery 1.7 oder eine höhere Version verwenden, verwenden Sie prop () anstelle von attr (). Das ist. Auf diese Weise aktivieren oder deaktivieren Sie jedes Element mit jQuery.

wilder Kodierer
quelle
2

Update für 2018:

Jetzt gibt es keine Notwendigkeit für jQuery und es ist eine Weile her , seit gewesen document.querySelector oder document.querySelectorAll(für mehrere Elemente) tut fast genau gleiche Arbeit wie $, plus mehr explizit diejenigen getElementById, getElementsByClassName,getElementsByTagName

Deaktivieren eines Felds der Klasse "Eingabe-Kontrollkästchen"

document.querySelector('.input-checkbox').disabled = true;

oder mehrere Elemente

document.querySelectorAll('.input-checkbox').forEach(el => el.disabled = true);
Pawel
quelle
1
Die Frage bezieht sich speziell auf jQuery ... aber ebenso ist Ihre Aussage korrekt und es lohnt sich zu wissen, dass jQuery dafür nicht mehr verwendet werden muss , wenn mehrere Elemente vorhanden sind.
ADyson
2

Mit der Methode jQuery prop () können Sie Formularelemente deaktivieren oder aktivieren oder mithilfe von jQuery dynamisch steuern. Die prop () -Methode erfordert jQuery 1.6 und höher.

Beispiel:

<script type="text/javascript">
        $(document).ready(function(){
            $('form input[type="submit"]').prop("disabled", true);
            $(".agree").click(function(){
                if($(this).prop("checked") == true){
                    $('form input[type="submit"]').prop("disabled", false);
                }
                else if($(this).prop("checked") == false){
                    $('form input[type="submit"]').prop("disabled", true);
                }
            });
        });
    </script>
SPARTANISCH
quelle
1

Deaktivieren:

$('input').attr('readonly', true); // Disable it.
$('input').addClass('text-muted'); // Gray it out with bootstrap.

Aktivieren:

$('input').attr('readonly', false); // Enable it.
$('input').removeClass('text-muted'); // Back to normal color with bootstrap.
Tomer Ben David
quelle
1

Deaktivieren Sie true für den Eingabetyp:

Bei einem bestimmten Eingabetyp ( Bsp. Texteingabe )

$("input[type=text]").attr('disabled', true);

Für alle Arten von Eingabetypen

$("input").attr('disabled', true);
Hasib Kamal
quelle
1
Vielen Dank, dies hat mir geholfen, einen Eingabenamen zu isolieren. $("input[name=method]").prop('disabled', true);
Harry Bosh
1

das funktioniert bei mir

$("#values:input").attr("disabled",true);
$("#values:input").attr("disabled",false);
Learnkevin
quelle
0

Ich habe @gnarf answer verwendet und als Funktion hinzugefügt

   $.fn.disabled = function (isDisabled) {
     if (isDisabled) {
       this.attr('disabled', 'disabled');
     } else {
       this.removeAttr('disabled');
     }
   };

Dann verwenden Sie so

$('#myElement').disable(true);
Imants Volkovs
quelle
0

2018 ohne JQuery (ES6)

Alle deaktivieren input:

[...document.querySelectorAll('input')].map(e => e.disabled = true);

Deaktivieren inputmitid="my-input"

document.getElementById('my-input').disabled = true;

Die Frage ist bei JQuery, es ist nur zu Ihrer Information.

Rap-2-h
quelle
0

Verwenden Sie so,

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

 $( "#id" ).prop( "disabled", false );
Abdus Salam Azad
quelle
-1
<html>
<body>

Name: <input type="text" id="myText">



<button onclick="disable()">Disable Text field</button>
<button onclick="enable()">Enable Text field</button>

<script>
function disable() {
    document.getElementById("myText").disabled = true;
}
function enable() {
    document.getElementById("myText").disabled = false;
}
</script>

</body>
</html>

quelle
1
Aus der Überprüfungswarteschlange : Darf ich Sie bitten, Ihrer Antwort einen weiteren Kontext hinzuzufügen. Nur-Code-Antworten sind schwer zu verstehen. Es wird sowohl dem Fragesteller als auch zukünftigen Lesern helfen, wenn Sie Ihrem Beitrag weitere Informationen hinzufügen können.
RBT
-1

In jQuery Mobile:

Zum Deaktivieren

$('#someselectElement').selectmenu().selectmenu('disable').selectmenu('refresh', true);
$('#someTextElement').textinput().textinput('disable');

Zum Aktivieren

$('#someselectElement').selectmenu().selectmenu('enable').selectmenu('refresh', true);
$('#someTextElement').textinput('enable');
Atif Hussain
quelle