How To Set The “Disabled” Attribute Using JavaScript?

In web programming, many situations require enabling/disabling buttons, inputs, checkboxes, etc. For example, users who have not finished entering their information cannot click the “login” button. This article will show you solutions to set the “disabled” attribute using JavaScript. Read on it.

What is the HTML “disabled” Attribute?

When applied to an element, “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 remove 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, textarea.

Example:

<button type="button" disabled>Submit</button>

Output:

This example depicts a disabled button.

Set the “disabled” Attribute using JavaScript

This article will show two solutions to set the “disabled” Attribute using JavaScript.

Solution 1: Set the “disabled” Attribute directly

After identifying the element that needs to be disabled, we’ll set the element’s “disabled” Attribute to true.

Syntax:

element.disabled = true

Example:

<button id="btn">Submit</button>

const submit = document.getElementById('btn');
submit.disabled = true;

Output:

In the above example, we use “disabled” Attribute with the value true to disable one element.

For the case where we need to disable multiple elements, we will do the same.

Example:

<input class="lsit" type="button" value="Submit"><br>
<input class="lsit" type="radio" name=""><br>
<input class="lsit" type="checkbox" name="checkbox">

var element = document.getElementsByClassName('lsit');
    
for (var i = 0; i <= element.length; i++) {
    element[i].disabled = true;
}

Output:

Solution 2: Set the “disabled” attribute using setAttribute() method

The setAttribute() method in JavaScript is used to create an attribute’s new value.

Syntax:

element.setAttribute(name, value)

Parameters:

• name: The name of the Attribute to the set
• value: The new value of that attribute

To set the “disabled” Attribute using JavaScript, 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 “disabled” Attribute is set to an empty string (“”), “disabled” Attribute will be true, and the selected element will be disabled.

If you need to remove an attribute, use the removeAttribute() method.

Example:

<input class="lsit" type="button" value="Submit"><br>
<input class="lsit" type="radio" name=""><br>
<input class="lsit" type="checkbox" name="checkbox">

const elements = document.querySelectorAll('.lsit');

for (const element of elements) {
    element.setAttribute("disabled", "");
}

Output:

Summary

This article has shown you how to set the “disabled” attribute using JavaScript. I hope the information in this article is helpful to you.

Maybe you are interested:

• Get an Element by Name attribute using JavaScript
• Add a class to the Body element using JavaScript
• Add Line breaks to a Textarea using JavaScript
• Check if an Element does NOT have specific Class using JS

Bruce Warren

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