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:
Vi vil definere funksjon "DisableButton ()”For å deaktivere knappen ved å angi verdien av funksjonshemmede attributt til“ekte”:
funksjon DisableButton ()For aktiverende knapp, angi den funksjonshemmede eiendomsverdien til “falsk”:
funksjon enableButton ()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:
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 ()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");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:
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.