Come disabilitare o abilitare i pulsanti usando JavaScript e JQuery

Hai mai notato con quale frequenza, il pulsante di invio non funzionerebbe fino a quando tutti i campi pertinenti non saranno stati compilati in un modulo web? Questa logica viene implementata determinando lo stato del pulsante (abilitato o disabilitato) a seconda che il campo di input sia riempito o meno e quindi esegue l'operazione richiesta. Se non sei sicuro di come eseguirlo? Nessun problema!

Questo manuale spiegherà il metodo per abilitare e disabilitare i pulsanti con l'aiuto di JavaScript e JQuery.

Come disabilitare o abilitare i pulsanti usando JavaScript e JQuery?

Una delle cose più pratiche che ogni applicazione Web include nei suoi pulsanti sono le funzionalità abilitanti e disabilitanti. Puoi usare il "Disabilitato"Attributo per abilitare o disabilitare i pulsanti in jQuery e JavaScript.

Esempio 1: Disabilita o abilita i pulsanti usando JavaScript
Nel file HTML, prima creeremo tre pulsanti, il pulsante in cui si esegueranno le azioni, uno è per disabilitare e l'altro è per abilitare il pulsante:

Pulsante
Fai clic per disabilitare
Fai clic per abilitare

Definiremo la funzione "DisableButton ()"Per disabilitare il pulsante impostando il valore dell'attributo disabilitato su"VERO":

funzione disableButton ()
documento.getElementById ("pulsante").disabile = true;

Per abilitare il pulsante, impostare il valore della proprietà disabilitato su "falso":

funzione abilitaButton ()
documento.getElementById ("pulsante").disabile = false;

L'output corrispondente è il seguente:

Esempio 2: Disabilita o abilita i pulsanti usando jQuery
In questo esempio, useremo jQuery per disabilitare e abilitare il pulsante. Per fare ciò, prima, crea due pulsanti in un file HTML. Uno di questi è usato per disabilitare e abilitare l'altro pulsante:

Pulsante
Fai clic qui per disabilitare e per abilitare doppio clic su di esso

Per usare jQuery, specificalo "src"Attributo nel tag:

Nel tag, disabilita il pulsante su un singolo clic attivando "clic"Evento nel pulsante con ID"interruttore"E imposta il valore di"Disabilitato"Attributo del primo pulsante a"VERO". Allo stesso modo, sul "dblClick"Evento, impostare il valore dell'attributo disabilitato su"falso"Per abilitare il"Pulsante"A doppio clic:

$ (documento).ready (function ()
$ ('#toggle').on ('click', function ()
$ ('##Button').prop ("disabilitato", vero);
);
$ ('#toggle').on ('dblClick', function ()
$ ('##Button').prop ("disabilitato", falso);
);
);

L'output indica che disabilitiamo correttamente e abilitiamo il pulsante usando jQuery:

Esempio 3: abilita il pulsante disabilitato usando JavaScript
Ora, abiliteremo il pulsante disabilitato dopo aver inserito un po 'di testo nel campo di testo usando JavaScript. Per questo, crea un campo di input e un pulsante di invio con ID "testo" E "invia". Il pulsante di invio è disabilitato per impostazione predefinita utilizzando l'attributo disabilitato:

Nel file JavaScript, otterremo prima gli ID del campo e del pulsante di input e quindi chiameremo la funzione "StateHandle" In "addEventlistener"Metodo, in cui imposteremo il valore dell'attributo disabilitato su"falso"Se il campo di testo è vuoto, il che indica il pulsante Disabilita; altro, lo imposteremo come "VERO", Se il campo di input è riempito con qualsiasi testo e il pulsante di invio sarà abilitato:

Sia input = document.QuerySelector ("#text");
Let Button = Document.QuerySelector ("#invio");
ingresso.addEventListener ("Change", StateHandle);
funzione stateHandle ()
if (documento.QuerySelector ("#text").valore != "")
pulsante.disabile = false;

altro
pulsante.disabile = true;

Produzione

Esempio 4: abilita i pulsanti Disabilitato utilizzando jQuery
In questo esempio, useremo JQuery per abilitare il pulsante Disabilitato Invio. Per fare ciò, impostare innanzitutto il valore dell'attributo disabilitato su "falso"Per disabilitare il pulsante mentre il campo di input è vuoto. Quindi, se il campo è riempito con qualsiasi testo, impostare il valore dell'attributo disabilitato "VERO", Che consente il pulsante di invio:

$ (documento).ready (function ()
$ ('#Text').on ('Input Change', function ()
if ($ (questo).Val () != ")
$ ('#invio').prop ("disabilitato", falso);

altro
$ ('#invio').prop ("disabilitato", vero);

);
);

L'output corrispondente è mostrato di seguito:

Abbiamo coperto tutti gli aspetti del pulsante abilitazione e disabilitazione usando JavaScript e JQuery.

Conclusione

Per abilitare e disabilitare il pulsante in JavaScript e JQuery, è possibile utilizzare "Disabilitato" proprietà. Per fare ciò, impostare il valore dell'attributo disabilitato "VERO" O "falso"Per disabilitare o abilitare il pulsante, rispettivamente. In questo manuale, abbiamo spiegato il metodo per abilitare e disabilitare i pulsanti con l'aiuto di JavaScript e JQuery.