Hvordan deaktivere eller aktivere knapper ved hjelp av JavaScript og jQuery

Har du noen gang lagt merke til hvor ofte, send -knappen ville ikke fungere før alle relevante felt er fylt ut på et nettskjema? Denne logikken implementeres ved å bestemme knappens status (aktivert eller deaktivert), avhengig av om inngangsfeltet er fylt eller ikke, og deretter utføre den nødvendige driften. Hvis du ikke er sikker på hvordan du skal utføre det? Ingen bekymringer!

Denne håndboken vil forklare metoden for å aktivere og deaktivere knapper ved hjelp av JavaScript og jQuery.

Hvordan deaktivere eller aktivere knapper ved hjelp av JavaScript og jQuery?

Noe av det mest praktiske hver webapplikasjon inkluderer i knappene er aktiverende og deaktiverende funksjonalitetene. Du kan bruke “funksjonshemmet”Attributt for aktivering eller deaktivering av knappene i jQuery og JavaScript.

Eksempel 1: Deaktiver eller aktiver knapper ved hjelp av JavaScript
I HTML -filen vil vi først lage tre knapper, knappen der handlingene vil utføre, den ene er for deaktiverende og den andre er for å aktivere knappen:

Knapp
Klikk for å deaktivere
Klikk for å aktivere

Vi vil definere funksjon "DisableButton ()”For å deaktivere knappen ved å angi verdien av funksjonshemmede attributt til“ekte”:

funksjon DisableButton ()
dokument.getElementById ("knapp").deaktivert = sant;

For aktiverende knapp, angi den funksjonshemmede eiendomsverdien til “falsk”:

funksjon enableButton ()
dokument.getElementById ("knapp").deaktivert = falsk;

Den tilsvarende utgangen er som følger:

Eksempel 2: Deaktiver eller aktiver knapper ved hjelp av jQuery
I dette eksemplet vil vi bruke jQuery for å deaktivere og aktivere knappen. For å gjøre det, først, oppretter du to knapper i en HTML -fil. En av dem er vant til å deaktivere og aktivere den andre knappen:

Knapp
Klikk her for å deaktivere og for å aktivere dobbeltklikk på den

For bruk av jQuery, spesifiser det “src”Attributt i taggen:

I taggen, deaktiver knappen på et enkelt klikk ved å utløse “Klikk”Hendelse i knappen med ID”veksle”Og angi verdien av“funksjonshemmet”Attributt av den første knappen til“ekte”. Tilsvarende på "dblclick”Arrangement, sett verdien av funksjonshemmede attributt til“falsk”For å aktivere“Knapp”På dobbeltklikk:

$ (dokument).klar (funksjon ()
$ ('#Toggle').på ('klikk', funksjon ()
$ ('#knapp').prop ('deaktivert', sant);
);
$ ('#Toggle').på ('dblclick', funksjon ()
$ ('#knapp').prop ('deaktivert', falsk);
);
);

Utgangen betyr at vi med hell deaktiverer og aktiverer knappen ved hjelp av jQuery:

Eksempel 3: Aktiver den deaktiverte knappen ved hjelp av JavaScript
Nå vil vi aktivere funksjonshemmede -knappen etter å ha lagt inn en tekst i tekstfeltet ved hjelp av JavaScript. For dette, lag et inngangsfelt og en innsendingsknapp med IDS “tekst”Og“sende inn”. Send -knappen er deaktivert som standard ved å bruke funksjonshemmede attributt:

I JavaScript -filen får vi først ID -ene i inndatafeltet og knappen og deretter ringe funksjonen "Statehandle”I“AddEventListener”Metode, der vi vil sette verdien av funksjonshemmede attributtet til“falsk”Hvis tekstfeltet er tomt, noe som indikerer deaktiveringsknappen; ellers vil vi sette det som "ekte”, Hvis inndatafeltet er fylt med en tekst og sendeknappen vil være aktivert:

La input = dokument.QuerySelector ("#tekst");
La knapp = dokument.querySelector ("#send");
inngang.AddEventListener ("Change", Statehandle);
funksjon StateHandle ()
hvis (dokument.QuerySelector ("#tekst").verdi != "")
knapp.deaktivert = falsk;

annet
knapp.deaktivert = sant;

Produksjon

Eksempel 4: Aktiver de deaktiverte knappeknappene ved hjelp av jQuery
I dette eksemplet vil vi bruke jQuery for å aktivere den deaktiverte innsendingsknappen. For å gjøre det, sett først verdien av funksjonshemmede attributt til "falsk”For å deaktivere knappen mens inngangsfeltet er tomt. Hvis feltet er fylt med noen tekst, må du angi verdien av funksjonshemmede attributt til "ekte”, Som muliggjør send -knappen:

$ (dokument).klar (funksjon ()
$ ('#Tekst').på ('inputendring', funksjon ()
if ($ (dette).val () != ")
$ ('#send').prop ('deaktivert', falsk);

annet
$ ('#send').prop ('deaktivert', sant);

);
);

Tilsvarende utgang er vist nedenfor:

Vi har dekket alle aspektene ved aktiverings- og deaktiveringsknappen ved hjelp av JavaScript og jQuery.

Konklusjon

For å aktivere og deaktivere knappen i JavaScript og jQuery, kan du bruke "funksjonshemmet”Eiendom. For å gjøre det, sett verdien av funksjonshemmede attributt “ekte”Eller“falsk”For å deaktivere eller aktivere henholdsvis knappen henholdsvis. I denne håndboken har vi forklart metoden for å aktivere og deaktivere knapper ved hjelp av JavaScript og jQuery.