While creating web pages or sites involving user interaction, there can be a requirement to fill out a form or a questionnaire having case-sensitive fields. For instance, inputting name, password, etc. In addition, restricts the user from entering a field or submitting a form if a particular requirement is satisfied. In such case scenarios, setting the disabled attribute using JavaScript becomes very helpful in providing a mode of communication between the developer and the end user.
This article will illustrate how to set the disabled attribute in JavaScript.
How to Set the “disabled” Attribute in JavaScript?
The “disabled” attribute can be set with the help of the “setAttribute()” method. The setAttribute() method assigns a particular value to an attribute. This method can be applied to assign an element a particular attribute.
Syntax
In the above syntax:
- “name” specifies the attribute’s name.
- “value” corresponds to the new attribute’s value.
Let’s follow the below-given examples.
Example 1: Set the “disabled” Attribute of an Input Field
In this example, a single input field will be disabled upon the button click.
Let’s observe the below-given example:
<input type= "text" id= "input" placeholder= "Enter Text...">
<br><br>
<button onclick="setDisable()">Click to disable the Field</button>
</body></center>
<script type="text/javascript">
function setDisable(){
let get = document.getElementById('input');
get.setAttribute('disabled', '');
}
</script>
In the above lines of code:
- Include an input field having the specified “id” and a “placeholder” value.
- Also, create a button having an attached “onclick” event redirecting to the function setDisable().
- In the JavaScript part of the code, declare a function named “setDisable()”. In its definition, access the included input field using its “id” in the “getElementById()” method.
- Lastly, apply the “setAttribute()” method such that the fetched element in the previous step is assigned the attribute “disabled”.
- This will result in disabling the input field upon the button click.
Output
From the above output, it can be observed that the input field becomes disabled upon the button click.
Example 2: Set the “disabled” Attribute With the Help of a Boolean Value
In this example, the disabled attribute will be allocated a boolean value to perform the desired functionality.
The following example explains the stated concept:
<textarea id="input">Enter Text...</textarea>
<br><br>
<button onclick="setDisable()">Click to disable the Field</button>
</body></center>
<script type="text/javascript">
function setDisable(){
let get = document.getElementById('input');
get.setAttribute('disabled', true);
}
</script>
According to the above code snippet:
- Allocate an input “textarea” element having the stated “id”.
- Also, create a button having an “onclick” event which will invoke the function setDisable().
- In the JavaScript part of the code, define a function named “setDisable()”. In its definition, similarly, access the included text area, apply the “setAttribute()” method and assign it a boolean value “true”, respectively.
- This will resultantly disable the input text area upon the button click.
Output
The “disabled” attribute is set in a proper manner.
Example 3: Set the “disabled” Attribute to Multiple Elements
This example will result in setting the “disabled” attribute such that various elements will become disabled upon the button click at the same time.
Let’s overview the below-given example:
<input type= "text" class= "input">
<input type= "text" class= "input">
<input type= "checkbox" class= "input">
<br><br>
<button onclick= "setDisable()">Click to disable the Fields</button>
</body></center>
<script type="text/javascript">
function setDisable(){
let get = document.getElementsByClassName("input")
for (let input of get){
input.setAttribute('disabled', '');
}}
</script>
Go through the following steps as given in the above code snippet:
- Firstly, include the input “text fields” and a “checkbox” element, respectively having the specified class.
- Likewise, create a button having an “onclick” event invoking the function setDisable().
- In the JavaScript part of the code, declare a function named “setDisable()”. In its definition, access the included elements using the “getElementsByClassName()” method.
- After that, apply the “for” loop. Within the loop, apply the “setAttribute()” method such that all the included elements become disabled upon the button click.
Output
From the above output, it is evident that all the elements become disabled upon the button click.
Conclusion
The “setAttribute()” method can be implemented by taking different parameters to set the disabled attribute using JavaScript. This method can be applied to an input field with or without an assigned boolean value. It can also be utilized to disable multiple elements at the same time. This tutorial explained how to set the disable attribute using JavaScript.
