So deaktivieren oder aktivieren Sie Schaltflächen mit JavaScript und JQuery

Haben Sie jemals bemerkt, wie häufig die Sendel -Schaltfläche nicht funktioniert, bis alle relevanten Felder in einem Webformular ausgefüllt wurden? Diese Logik wird implementiert, indem der Status der Taste (aktiviert oder deaktiviert) festgelegt wird, je nachdem, ob das Eingabefeld ausgefüllt ist oder nicht, und dann die erforderliche Operation durchführen. Wenn Sie nicht sicher sind, wie Sie das ausführen sollen? Kein Problem!

In diesem Handbuch werden die Methode zum Aktivieren und Deaktivieren von Schaltflächen mit Hilfe von JavaScript und JQuery erläutert.

So deaktivieren oder aktivieren Sie Schaltflächen mit JavaScript und JQuery?

Eines der praktischsten Dinge, die jede Webanwendung in ihren Schaltflächen enthält, ist die Aktivierung und Deaktivierung von Funktionen. Du kannst den ... benutzen "Behinderte”Attribut zum Aktivieren oder Deaktivieren der Tasten in JQuery und JavaScript.

Beispiel 1: Deaktivieren oder Aktivieren von Schaltflächen mit JavaScript
In der HTML -Datei werden wir zunächst drei Schaltflächen erstellen, die Schaltfläche, bei der Aktionen ausgeführt werden, eine zum Deaktivieren und der andere dient zum Aktivieren der Taste:

Taste
Klicken Sie hier, um zu deaktivieren
Klicken Sie hier, um zu aktivieren

Wir werden die Funktion definieren “deaktivierenButton ()”Zum Deaktivieren der Schaltfläche durch Einstellen des Wertes des deaktivierten Attributs auf“ “WAHR”:

Funktion disableButton ()
dokumentieren.getElementById ("Button").deaktiviert = true;

Setzen Sie den Wert deaktivierter Eigenschaftswert auf die Schaltfläche für die Aktivierung der Schaltfläche auf “FALSCH”:

Funktion enableButton ()
dokumentieren.getElementById ("Button").deaktiviert = falsch;

Die entsprechende Ausgabe ist wie folgt:

Beispiel 2: Deaktivieren oder Aktivieren von Schaltflächen mit JQuery
In diesem Beispiel werden wir JQuery verwenden, um die Taste zu deaktivieren und zu aktivieren. Erstellen Sie zunächst zwei Schaltflächen in einer HTML -Datei. Einer von ihnen wird verwendet, um den anderen Taste zu deaktivieren und zu aktivieren:

Taste
Klicken Sie hier, um zu deaktivieren und doppelt zu aktivieren. Klicken Sie darauf

Für die Verwendung von JQuery geben Sie es an “an“src”Attribut in Tag:

Deaktivieren Sie im Tag die Schaltfläche eines einzelnen Klicks, indem Sie die “auslösenklicken"Ereignis in der Schaltfläche mit ID"Umschalten"Und setzen Sie den Wert der"Behinderte”Attribut der ersten Schaltfläche zu“WAHR”. Ebenso auf derDBLCLICKEreignis Ereignis, setzen Sie den Wert des deaktivierten Attributs auf “FALSCH"Um das zu aktivieren"Taste”Auf Doppelklick:

$ (Dokument).Ready (function ()
$ ('#Toggle').auf ('klick', function ()
$ ('#button').prop ('deaktiviert', wahr);
);
$ ('#Toggle').on ('dblclick', function ()
$ ('#button').prop ('deaktiviert', falsch);
);
);

Die Ausgabe bedeutet, dass wir die Taste mit JQuery erfolgreich deaktivieren und aktivieren:

Beispiel 3: Aktivieren Sie die Schaltfläche Deaktiviert mit JavaScript
Jetzt aktivieren wir die Schaltfläche deaktiviert, nachdem Sie einen Text mit JavaScript in das Textfeld eingegeben haben. Erstellen Sie hierfür ein Eingabefeld und eine Sendel -Schaltfläche mit IDs “Text" Und "einreichen”. Die Schaltfläche Senden wird standardmäßig unter Verwendung des behinderten Attributs deaktiviert:

In der JavaScript -Datei erhalten wir zuerst die IDs des Eingabefeldes und die Schaltfläche und rufen dann die Funktion auf “StateHandle" In "AddEventListenerMethode, wobei wir den Wert des deaktivierten Attributs auf “festlegen“FALSCHWenn das Textfeld leer ist, was die Schaltfläche Deaktivieren angibt; Sonst werden wir es so setzen als "WAHR”, Wenn das Eingabefeld mit einem Text gefüllt ist und die Schaltfläche Senden aktiviert ist:

lass input = document.querySelector ("#text");
Lassen Sie Taste = Dokument.QuerySelector ("#submit");
Eingang.AddEventListener ("Change", StateHandle);
Funktion stateHandle ()
if (Dokument.QuerySelector ("#text").Wert != "")
Taste.deaktiviert = falsch;

anders
Taste.deaktiviert = true;

Ausgang

Beispiel 4: Aktivieren Sie die Schaltflächen deaktivierter Taste mit JQuery
In diesem Beispiel werden wir JQuery verwenden, um die Schaltfläche "Behindertes Senden" zu aktivieren. Setzen Sie dazu zuerst den Wert des behinderten Attributs auf “FALSCH”Zum Deaktivieren der Taste, während das Eingangsfeld leer ist. Wenn das Feld dann mit einem Text gefüllt ist, setzen Sie den Wert des behinderten Attributs auf “WAHR”, Die die Schaltfläche Senden ermöglicht:

$ (Dokument).Ready (function ()
$ ('#Text').on ('Eingabeänderung', function ()
if ($ (this).val () != ")
$ ('#subine').prop ('deaktiviert', falsch);

anders
$ ('#subine').prop ('deaktiviert', wahr);

);
);

Die entsprechende Ausgabe ist unten dargestellt:

Wir haben alle Aspekte der Taste zur Aktivierung und Deaktivierung mit JavaScript und JQuery behandelt.

Abschluss

Um die Schaltfläche in JavaScript und JQuery zu aktivieren und zu deaktivieren, können Sie die „verwenden“Behinderte" Eigentum. Setzen Sie dazu den Wert des deaktivierten Attributs “WAHR" oder "FALSCH”Um die Taste zu deaktivieren oder zu aktivieren. In diesem Handbuch haben wir die Methode zum Aktivieren und Deaktivieren von Schaltflächen mit Hilfe von JavaScript und JQuery erläutert.