How To Disable An Element By ID Using JavaScript?

Disable an Element by ID using JavaScript

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 = true

Example:

<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 attribute

First, 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:

Leave a Reply

Your email address will not be published. Required fields are marked *