In JavaScript, ci imbattiamo spesso in pagine Web o moduli con determinati requisiti per compilare un modulo. Ad esempio, è necessario riempire un determinato campo di input con un numero specifico di caratteri. In tali casi, la funzionalità di disabilitazione di un pulsante in JavaScript in base alla condizione è molto utile per garantire la correttezza e i regolamenti dei dati di un elemento specifico dati.

Questo blog guiderà sulla disabilitazione di un pulsante in javascript condizionalmente.

Come disabilitare un pulsante in JavaScript in base alla condizione?

Per disabilitare un pulsante in JavaScript in base alla condizione, è possibile utilizzare i seguenti approcci:

• "Disabilitato"Proprietà con"lunghezza" proprietà
• "Include ()" E "documento.getElementById ()"Metodi

Passare attraverso i metodi discussi uno per uno!

Metodo 1: Disabilita un pulsante in JavaScript in base alla condizione utilizzando proprietà "disabilitate" e "lunghezza"

IL "Disabilitato"La proprietà indica se il controllo è disabilitato e, in tal caso, non accetta clic e"lunghezza"La proprietà specifica la lunghezza di una stringa. Queste proprietà verranno utilizzate per disabilitare un pulsante sulla condizione. Ad esempio, nel campo di input viene inserita una lunghezza specifica dei caratteri.

Panoramica il seguente esempio per comprendere il concetto dichiarato.

Esempio

In primo luogo, includi un tipo di input chiamato "testo"E un valore di segnaposto. Quindi, aggiungi un pulsante un'intestazione all'interno del div creato:

Spettacolo

Pulsante Disabilita

Passa al file JavaScript e prendi gli elementi specificati usando "documento.QuerySelector ()" metodo:

Let Button = Document.QuerySelector ('Button');
Sia input = document.QuerySelector ('Input');
Let output = document.QuerySelector ('H1');

Successivamente, includi un ascoltatore di eventi chiamato "clic"E collegalo al pulsante specificato, che compilerà il valore del campo di input quando si fa clic sul pulsante:

pulsante.addEventListener ('Click', () =>
produzione.InnerText = input.valore;
);

Allo stesso modo, un evento chiamato "keyup"Sarà attaccato al campo di input, che attiverà la funzione data in modo tale che se la lunghezza del valore del campo di input diventa maggiore di"5", Il pulsante verrà disabilitato:

ingresso.addEventListener ('keyup', () =>
if (input.valore.lunghezza> 5)
pulsante.disabile = true

altro
pulsante.disabile = false;

);

Produzione

Metodo 2: Disabilita un pulsante in JavaScript in base a una condizione particolare usando "Include ()" e Document.Metodi getElementById ()

IL "getElementById ()"Il metodo accede a un elemento con un valore specificato nel suo argomento e"Include ()"Il metodo restituisce vero se una particolare stringa contiene un valore stringa specificato. Questi metodi possono essere applicati per recuperare l'ID di input e posizionare una condizione su un carattere specificato nel campo di input.

Sintassi

documento.getElementByID (elementID)

Qui, "Elementid"Si riferisce all'ID specifico di un elemento HTML.

Include (SearchValue)

Nella sintassi sopra, "SearchValue"Si riferisce al valore che deve essere perquisito.

Il seguente esempio dimostra il concetto dichiarato.

Esempio

Innanzitutto, includi un tipo di input chiamato "testo" e un "Onkeyup"Evento che accede alla funzione denominata"DisableButton (questo)" Dove "Questo"Nel suo argomento si riferisce a un oggetto:

Allo stesso modo, includi un tipo di input chiamato "invia"Con un valore disabilitato come segue:

Ora, dichiara una funzione chiamata "DisableButton (txt)" Dove "TXT"Si riferisce all'oggetto. Prendere l'elemento tipo di input usando il documento.metodo getElementById (). Infine, applica una condizione per disabilitare il pulsante specificando un particolare carattere "!" usando il "Include ()" metodo. Ciò funzionerà in modo tale che se il carattere specificato viene rilevato nel campo di input, il pulsante verrà disabilitato:

functionDisableButton (txt)
var bt = documento.getElementById ('Invia');
if (disabilita.valore.Include ('!'))
bt.disabile = true

else bt.disabile = false;

Produzione

Abbiamo offerto i metodi più semplici per disabilitare un pulsante in JavaScript.

Conclusione

Per disabilitare un pulsante in JavaScript in base alla condizione, utilizza il "Disabilitato"Proprietà con il"lunghezza"Proprietà, che applicherà la funzionalità in base alla lunghezza dei caratteri di input o al"Include ()Metodo "con"documento.getElementById ()"Metodo per accedere al campo di input e applicare una condizione sul carattere specificato nel campo di input. Questo manuale ha fornito la procedura per disabilitare un pulsante in JavaScript in base alla condizione aggiunta.