I JavaScript kommer vi ofte over websider eller skjemaer som har visse krav til å fylle ut et skjema. For eksempel er det påkrevd å fylle et bestemt inngangsfelt med et bestemt antall tegn. I slike tilfeller er funksjonaliteten til å deaktivere en knapp i JavaScript basert på tilstand veldig nyttig for å sikre riktighet og forskrifter for dataene til en spesifikk elementdata.

Denne bloggen vil guide om å deaktivere en knapp i JavaScript betinget.

Hvordan deaktivere en knapp i JavaScript basert på tilstand?

For å deaktivere en knapp i JavaScript basert på tilstand, kan følgende tilnærminger brukes:

• “funksjonshemmet”Eiendom med“lengde”Eiendom
• “inkluderer ()”Og“dokument.getElementById ()”Metoder

Gå gjennom de diskuterte metodene en etter en!

Metode 1: Deaktiver en knapp i JavaScript basert på tilstand ved bruk av "deaktivert" og "lengde" -egenskaper

“funksjonshemmet”Eiendom indikerer om kontrollen er deaktivert, og i så fall godtar den ikke klikk, og“lengde”Eiendom spesifiserer lengden på en streng. Disse egenskapene vil bli brukt til å deaktivere en knapp på betingelsen. For eksempel legges en spesifikk lengde på tegnene inn i inngangsfeltet.

Oversikt Følgende eksempel for å forstå det uttalte konseptet.

Eksempel

For det første, inkluder en inngangstype som heter “tekst”Og en plassholderverdi. Legg deretter til en knapp en overskrift innenfor den opprettede div:

Forestilling

Deaktiver knappen

Flytt til JavaScript -filen, og hent de spesifiserte elementene ved å bruke "dokument.QuerySelector ()”Metode:

La knapp = dokument.QuerySelector ('Button');
La input = dokument.QuerySelector ('input');
La utdata = dokument.QuerySelector ('H1');

Etter det, inkluder en begivenhetslytter som heter “Klikk”Og fest den til den spesifiserte knappen, som vil fylle ut inngangsfeltverdien når knappen er klikket:

knapp.AddEventListener ('klikk', () =>
produksjon.innertekst = input.verdi;
);

Tilsvarende en hendelse som heter “Keyup”Vil være festet til inngangsfeltet, som vil utløse den gitte funksjonen på en slik måte at hvis lengden på inngangsfeltverdien blir større enn"5”, Knappen blir deaktivert:

inngang.AddEventListener ('Keyup', () =>
hvis (input.verdi.lengde> 5)
knapp.deaktivert = sant

annet
knapp.deaktivert = falsk;

);

Produksjon

Metode 2: Deaktiver en knapp i JavaScript basert på en bestemt tilstand ved å bruke “Inkluderer ()” og dokument.getElementById () Metoder

“getElementById ()”Metode får tilgang til et element med en spesifisert verdi i argumentet, og“inkluderer ()”Metode returnerer sann hvis en bestemt streng inneholder en spesifisert strengverdi. Disse metodene kan brukes for å hente inngangs -ID og plassere en tilstand på et spesifisert tegn i inngangsfeltet.

Syntaks

dokument.getElementById (ElementId)

Her, “ElementId”Henviser til den spesifikke IDen til et HTML -element.

Inkluderer (SearchValue)

I syntaks ovenfor, "SearchValue”Refererer til verdien som må søkes.

Følgende eksempel demonstrerer det uttalte konseptet.

Eksempel

Inkluder først en inngangstype som heter “tekst" og en "OnKeyup”Hendelse som får tilgang til funksjonen som heter“DisableButton (dette)" hvor "dette”I sitt argument refererer til et objekt:

På samme måte, inkluder en inngangstype som heter “sende inn”Med en funksjonshemmet verdi som følger:

Nå, erklærer en funksjon som heter “DisableButton (TXT)" hvor "tekst”Refererer til objektet. Hent inndatatypen ved å bruke dokumentet.getElementById () -metode. Til slutt, bruk en betingelse for å deaktivere knappen ved å spesifisere et bestemt tegn "!" bruker "inkluderer ()”Metode. Dette vil fungere på en slik måte at hvis det spesifiserte tegnet blir oppdaget i inngangsfeltet, vil knappen bli deaktivert:

FunctionDisableButton (txt)
var bt = dokument.getElementById ('Send');
hvis (deaktiver.verdi.inkluderer ('!'))
bt.deaktivert = sant

annet Bt.deaktivert = falsk;

Produksjon

Vi har tilbudt de enkleste metodene for å deaktivere en knapp i JavaScript.

Konklusjon

For å deaktivere en knapp i JavaScript basert på tilstand, bruk "funksjonshemmet”Eiendom med“lengde”Eiendom, som vil bruke funksjonaliteten basert på lengden på inngangstegn, eller“inkluderer ()”Metode med“dokument.getElementById ()”Metode for tilgang til inngangsfeltet og anvende en betingelse på det spesifiserte tegnet i inngangsfeltet. Denne håndboken ga prosedyren for å deaktivere en knapp i JavaScript basert på den ekstra tilstanden.