In JavaScript stoßen wir häufig auf Webseiten oder Formulare mit bestimmten Anforderungen an das Ausfüllen eines Formulars. Beispielsweise ist es erforderlich, ein bestimmtes Eingabefeld mit einer bestimmten Anzahl von Zeichen zu füllen. In solchen Fällen ist die Funktionalität der Deaktivierung einer Schaltfläche in JavaScript auf der Grundlage der Bedingung sehr nützlich, um die Richtigkeit und Vorschriften der Daten eines bestimmten Elementdaten zu gewährleisten.

In diesem Blog wird die Deaktivierung einer Schaltfläche in JavaScript bedingt führen.

So deaktivieren Sie eine Schaltfläche in JavaScript basierend auf der Bedingung?

Um eine Schaltfläche in JavaScript basierend auf der Bedingung zu deaktivieren, können die folgenden Ansätze verwendet werden:

• “Behinderte”Eigentum mit“Länge" Eigentum
• “inklusive ()" Und "dokumentieren.GetElementById ()”Methoden

Gehen Sie die diskutierten Methoden nacheinander durch!

Methode 1: Deaktivieren Sie eine Taste in JavaScript basierend auf der Bedingung mithilfe von Eigenschaften „Deaktiviert“ und „Länge“

Der "BehinderteEigenschaft gibt an, ob die Steuerung deaktiviert ist und wenn ja, akzeptiert sie keine Klicks und die “LängeEigenschaft gibt die Länge einer Zeichenfolge an. Diese Eigenschaften werden verwendet, um eine Taste unter der Bedingung zu deaktivieren. Zum Beispiel wird eine bestimmte Länge der Zeichen in das Eingabefeld eingegeben.

Übersicht Das folgende Beispiel, um das angegebene Konzept zu verstehen.

Beispiel

Geben Sie zunächst einen Eingangstyp mit dem Namen “an“TextUnd ein Platzhalterwert. Fügen Sie dann eine Schaltfläche hinzu, die in das erstellte DIV übergeht:

Zeigen

Taste deaktivieren

Wechseln Sie zur JavaScript -Datei und holen Sie die angegebenen Elemente mit der “dokumentieren.QuerySelector ()" Methode:

Lassen Sie Taste = Dokument.QuerySelector ('Taste');
lass input = document.QuerySelector ('Eingabe');
lass output = document.QuerySelector ('H1');

Danach fügen Sie einen Ereignishörer mit dem Namen "klicken”Und fügen Sie es an die angegebene Taste bei, mit der der Eingabefeldwert ausgefüllt wird, wenn die Schaltfläche klickt:

Taste.AddEventListener ('Click', () =>
Ausgang.InnerText = Eingabe.Wert;
);

In ähnlicher Weise eine Veranstaltung namens “Schlüssel”Wird an das Eingangsfeld angehängt, was die angegebene Funktion so auslöst, dass, wenn die Länge des Eingangsfeldwerts größer wird als“5”, Die Schaltfläche wird deaktiviert:

Eingang.AddEventListener ('KeyUp', () =>
if (Eingabe.Wert.Länge> 5)
Taste.deaktiviert = true

anders
Taste.deaktiviert = falsch;

);

Ausgang

Methode 2: Deaktivieren Sie eine Schaltfläche in JavaScript basierend auf einer bestimmten Bedingung mit "Include ()" und Dokument.GetElementById () -Methoden

Der "GetElementById ()Methode greift auf ein Element mit einem bestimmten Wert in seinem Argument und auf das “zugänglichinklusive ()Die Methode gibt true zurück, wenn eine bestimmte Zeichenfolge einen angegebenen String -Wert enthält. Diese Methoden können angewendet werden, um die Eingabe -ID abzurufen und eine Bedingung auf ein bestimmtes Zeichen im Eingangsfeld zu platzieren.

Syntax

dokumentieren.GetElementById (elementId)

Hier, "elementid”Bezieht sich auf die spezifische ID eines HTML -Elements.

Inklusive (SearchValue)

In der obigen Syntax “,“SearchValue”Bezieht sich auf den Wert, der durchsucht werden muss.

Das folgende Beispiel demonstriert das angegebene Konzept.

Beispiel

Geben Sie zunächst einen Eingangstyp mit dem Namen “an“Text" und ein "Onkeyup"Ereignis zugreift auf die benannte Funktion"deaktivierenButton (dies)" Wo "Das”In seinem Argument bezieht sich auf ein Objekt:

In ähnlicher Weise geben Sie einen Eingangstyp mit dem Namen “an“einreichen”Mit einem behinderten Wert wie folgt:

Deklarieren Sie nun eine Funktion namens “deaktivierenButton (TXT)" Wo "txtBezieht sich auf das Objekt. Abrufen Sie das Eingangstypelement mit dem Dokument ab.GetElementById () -Methode. Wenden Sie schließlich eine Bedingung zum Deaktivieren der Taste an, indem Sie ein bestimmtes Zeichen angeben. “!" Verwendung der "inklusive ()" Methode. Dies funktioniert so, dass die Taste deaktiviert wird, wenn das angegebene Zeichen im Eingabefeld erkannt wird:

FunctionDisableButton (txt)
var bt = dokument.GetElementById ('Submit');
if (deaktivieren.Wert.Inklusive ('!'))
Bt.deaktiviert = true

sonst bt.deaktiviert = falsch;

Ausgang

Wir haben die einfachsten Methoden zur Deaktivierung einer Taste in JavaScript angeboten.

Abschluss

Verwenden Sie die „Taste in JavaScript basierend auf der Bedingung anhand der Bedingung, um die“ zu verwendenBehinderteEigentum mit dem "Länge”Eigenschaft, die die Funktionalität basierend auf der Länge der Eingangszeichen oder der“ anwendetinklusive ()”Methode mit“dokumentieren.GetElementById ()Methode zum Zugriff auf das Eingabefeld und die Anwendung einer Bedingung im angegebenen Zeichen im Eingabefeld. Dieses Handbuch stellte die Prozedur zur Deaktivierung einer Taste in JavaScript an, die auf der zusätzlichen Bedingung basiert.