In web programming, many situations require enabling/disabling buttons, inputs, checkboxes, etc. This article will show you one of several solutions to prevent users from using HTML elements by setting the “disabled” Attribute in JavaScript. That’s disable an element by ID using JavaScript.
What is the HTML “disabled” attribute?
When applied to an element, the “disabled” attribute renders the element unusable. “Disabled” attribute can be set to prevent the user from using the element until the required conditions are met (like pressing a button, selecting a checkbox, etc.).
JavaScript can then delete the “disabled” attribute and make the element usable by the user.
The following elements can apply to the “disabled” Attribute: Button, fieldset, input, optgroup, option, select, and textarea.
Example:
<button type="button" disabled>Submit</button>Output:
This example depicts a disabled button.
Disable an element by ID using JavaScript
This article will show two solutions to disable an element by ID using JavaScript.
Solution 1: Disable an element by ID directly
First, we use the getElementById() method to choose the element with the specified ID. After identifying the element that needs to be disabled, we’ll set the “disabled” attribute to true.
Syntax:
element.disabled = trueExample:
<button id="btn">Submit</button>const submit = document.getElementById('btn');
submit.disabled = true;Output:
Solution 2: Disable an element by ID using setAttribute() method
To disable an element by ID using the setAttribute() method. First, we use the getElementById() method to choose the element with the specified ID. Then, we can set the “disabled” attribute on the selected element by using the setAttribute() method.
The setAttribute() method in JavaScript creates an attribute’s new value.
Syntax:
element.setAttribute(name, value)Parameter:
name: The name of the attribute to the set
value: The new value of that attributeFirst, call the setAttribute() method on the element. Then we set the first parameter to “disabled” and the second parameter to an empty string (“”).
Because when the value of the “disabled” attribute is set to an empty string (“”), the “disabled” attribute will be true, and the selected element will be disabled.
Example:
<button id="btn">Submit</button>const submit = document.getElementById('btn');
submit.setAttribute("disabled", "");Output:
Summary
This article has shown you how to disable an element by ID using JavaScript. I hope the information in this article is helpful to you. If you have any questions, please comment below. Thank you for your reading!
Maybe you are interested:
- Change the Text of a Label element using JavaScript
- Get an Element by Name attribute using JavaScript
- Add a class to the Body element using JavaScript
Hello, my name’s Bruce Warren. You can call me Bruce. I’m interested in programming languages, so I am here to share my knowledge of programming languages with you, especially knowledge of C, C++, Java, JS, PHP.
Name of the university: KMA
Major: ATTT
Programming Languages: C, C++, Java, JS, PHP
