Imposta l'attributo disabilitato usando JavaScript

Imposta l'attributo disabilitato usando JavaScript

Durante la creazione di pagine Web o siti che coinvolgono l'interazione dell'utente, può essere necessario compilare un modulo o un questionario con campi sensibili al caso. Ad esempio, immissione di nome, password, ecc. Inoltre, impedisce all'utente di immettere un campo o di inviare un modulo se è soddisfatto un requisito particolare. In tali scenari di casi, l'impostazione dell'attributo disabilitato utilizzando JavaScript diventa molto utile nel fornire una modalità di comunicazione tra lo sviluppatore e l'utente finale.

Questo articolo illustrerà come impostare l'attributo disabilitato in JavaScript.

Come impostare l'attributo "disabilitato" in JavaScript?

IL "Disabilitato"L'attributo può essere impostato con l'aiuto di"setAttribute ()" metodo. Il metodo setAttribute () assegna un valore particolare a un attributo. Questo metodo può essere applicato per assegnare un elemento un particolare attributo.

Sintassi

elemento.setAttribute (nome, valore)

Nella sintassi sopra:

  • "nome"Specifica il nome dell'attributo.
  • "valore"Corrisponde al valore del nuovo attributo.

Seguiamo gli esempi di seguito.

Esempio 1: impostare l'attributo "disabilitato" di un campo di input

In questo esempio, un singolo campo di input verrà disabilitato al clic del pulsante.

Osserviamo l'esempio di seguito:








Nelle righe di codice sopra:

  • Includere un campo di input con il specificato "id"E un"segnaposto" valore.
  • Inoltre, crea un pulsante con un allegato "al clic"Reindirizzamento degli eventi alla funzione setDisable ().
  • Nella parte JavaScript del codice, dichiarare una funzione denominata "setDisable ()". Nella sua definizione, accedi al campo di input incluso usando il suo "id" nel "getElementById ()" metodo.
  • Infine, applica il “setAttribute ()"Metodo in modo tale che l'elemento recuperato nel passaggio precedente è assegnato l'attributo"Disabilitato".
  • Ciò comporterà la disabilitazione del campo di input sul clic del pulsante.

Produzione

Dall'output sopra, si può osservare che il campo di input viene disabilitato al clic del pulsante.

Esempio 2: impostare l'attributo "disabilitato" con l'aiuto di un valore booleano

In questo esempio, l'attributo disabilitato verrà assegnato un valore booleano per eseguire la funzionalità desiderata.

Il seguente esempio spiega il concetto dichiarato:








Secondo lo snippet di codice sopra:

  • Allocare un input "textrea"Elemento con il dichiarato"id".
  • Inoltre, crea un pulsante con un "al clic"Evento che invocherà la funzione setDisable ().
  • Nella parte JavaScript del codice, definisci una funzione denominata "setDisable ()". Nella sua definizione, allo stesso modo, accedi all'area di testo inclusa, applica il "setAttribute ()"Metodo e assegnarlo un valore booleano"VERO"Rispettivamente.
  • Ciò disabiliterà di conseguenza l'area di testo di input sul clic del pulsante.

Produzione

IL "Disabilitato"L'attributo è impostato in modo corretto.

Esempio 3: impostare l'attributo "disabilitato" su più elementi

Questo esempio comporterà l'impostazione del "Disabilitato"Attributo in modo tale che vari elementi diventi disabilitato al momento del pulsante.

Panoramiamo l'esempio di seguito:










Passa attraverso i seguenti passaggi come indicato nel frammento di codice sopra:

  • In primo luogo, includi l'input "campi di testo"E un"Casella di controllo"Elemento, rispettivamente con la classe specificata.
  • Allo stesso modo, crea un pulsante con un "al clic"Evento che invoca la funzione setDisable ().
  • Nella parte JavaScript del codice, dichiarare una funzione denominata "setDisable ()". Nella sua definizione, accedi agli elementi inclusi usando il “getElementsByClassName ()" metodo.
  • Dopodiché, applica il "per" ciclo continuo. All'interno del ciclo, applica il "setAttribute ()"Metodo in modo tale che tutti gli elementi inclusi diventino disabilitati al clic del pulsante.

Produzione

Dall'output sopra, è evidente che tutti gli elementi diventano disabilitati al clic del pulsante.

Conclusione

IL "setAttribute ()"Il metodo può essere implementato prendendo parametri diversi per impostare l'attributo disabilitato usando JavaScript. Questo metodo può essere applicato a un campo di input con o senza un valore booleano assegnato. Può anche essere utilizzato per disabilitare più elementi contemporaneamente. Questo tutorial ha spiegato come impostare l'attributo Disabilita usando JavaScript.