How To Set The “Disabled” Attribute Using JavaScript?

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:

Leave a Reply

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