Set disable button javascript

Disable a HTML Button in JavaScript [With Examples]

To disable a button using only JavaScript you need to set the disabled property to false . For example: element.disabled = true .

And to enable a button we would do the opposite by setting the disabled JavaScript property to false .

Here a more complete example where we select the button and then we change its disabled property:

// Disabling a button using JavaScript
document.querySelector('#button').disabled = true;

// Enabling a disabled button to enable it again 
document.querySelector('#button').disabled = false;

These are the steps we have to follow:

The disabled property reflects the HTML attribute disabled and provide a way to change this property dynamically with JavaScript.

Disable button example

For demo purposes and to keep it as simple as possible we’ll be disabling the button when clicking on itself:

const button = document.querySelector('#button');

const disableButton = () =>  
button.disabled = true;
>;

button.addEventListener('click', disableButton);

Here’s the codepen so you can test it out yourself and play a bit more with it by changing the code:

If you are using jQuery, check out our article on how to disable a button using jQuery. The process is pretty similar.

References

Related articles

Источник

Disable a Button with JavaScript

Many times in our program, we may need to disable or enable a button in our webpage based on certain conditions being fulfilled or not, and for that, we must be aware about the ways how to do it.

Introduction

The button element is one of the few elements in HTML that can have its state, i.e., either being enabled to accept a click or it could be disabled.

For example — Suppose we are asking the user to fill out a form on our website, and we only want to enable the submit button when the user has clicked on the ‘They have read the terms and conditions’ option, or they have filled some mandatory input field. So in order to do that, we have a particular property associated with every button element in HTML, the disabled property. We can use the disabled property to toggle the state of a button’s activeness to be either true or false , and through this, we can enable or disable a button.

Let’s understand it better with the help of an example.

Program to Disable a Button Using Javascript Disable Button Property

The disabled property in JavaScript is a property associated with every button element, and in order to make it work, we first need to capture that specific button that we want to target through either the querySelector , the getElementById method, the getElementByClassName method, the getElementByTagName method or any other element selector method that we want to use.

After having the button, we can now use the disabled property to make its state active or inactive. To make it inactive, we can set its value to true.

And to make it active again, we can simply set its value to false.

We will not be hardcoding enabling or disabling buttons like this in actual programs; we want this to happen automatically when a specific condition is being met.

Now let’s see an example to understand it better.

Examples of JavaScript Disable Button

Example 1 — Basic Implementation of the Javascript Disable Button property

Output before clicking the button

Output after clicking the button

We can see that after clicking the button, the disableButton() function got executed, and it made the button’s background gray out, denoting it is now not clickable, i.e., the button is disabled now.

Example 2 — Implementing the Javascript Disable Button Property into an Actual form Element

Output before selecting checkbox

Output after selecting checkbox

We can see here the submit button is disabled by default, and it gets clickable only after the user has selected the required checkbox.

Conclusion

• Every button element in HTML has a property named disabled to toggle its state of activeness and inactiveness.
• For that, we first need to capture that specific button using query selectors, and after that,
• We can set the button.disabled = true; to disable that button and button.disabled = false; to enable it back again.
• We can use this implementation to make a button active or inactive based on certain specific conditions being met or not, for example — enabling the submit button only if the user has filled all the mandatory fields, etc.

Источник

Set disable button javascript

Last updated: Jan 11, 2023
Reading time · 3 min

# Set the disabled Attribute using JavaScript

To set the disabled attribute, select the element and call the setAttribute() method on it, passing it disabled as the first parameter.

The setAttribute method will add the disabled attribute to the element.

Here is the HTML for the examples.

Copied! 
DOCTYPE html> html lang="en"> head> title>bobbyhadz.comtitle> meta charset="UTF-8" /> head> body> button id="btn">Buttonbutton> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const button = document.getElementById('btn'); // ✅ Set the disabled attribute button.setAttribute('disabled', ''); // ✅ Remove the disabled attribute // button.removeAttribute('disabled'); 

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

Copied! 
const btn = document.getElementById('btn'); // ✅ Remove disabled attribute from button btn.removeAttribute('disabled'); // ✅ Add disabled attribute to button // btn.setAttribute('disabled', ''); 

We used the document.getElementById method to select the element by its id .

We then used the setAttribute method to add the disabled attribute to the button.

The method takes the following 2 parameters:

1. name — the name of the attribute to be set.
2. value — the value to assign to the attribute.

If the attribute already exists on the element, the value is updated, otherwise, a new attribute is added with the specified name and value.

When setting the value of a boolean attribute, such as disabled , we can specify any value for the attribute and it will work.

If a boolean attribute is not present, the value of the attribute is considered to be false .

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

Copied! 
const button = document.getElementById('btn'); // ✅ Set the disabled attribute button.setAttribute('disabled', ''); // ✅ Remove the disabled attribute button.removeAttribute('disabled'); 

When setting the disabled attribute, we pass an empty string as the value for the attribute because it’s a best practice to set boolean attributes without a value.

The disabled attribute can be set to any value and as long as it is present on the element, it does the job.

# Setting the disabled attribute on multiple elements

Note that you can only call the setAttribute method on DOM elements.

If you need to set the disabled attribute on a collection of elements, you have to iterate over the collection and call the method on each element.

Here is the HTML for the next example.

Copied! 
DOCTYPE html> html lang="en"> head> title>bobbyhadz.comtitle> meta charset="UTF-8" /> head> body> button class="btn">Buttonbutton> button class="btn">Buttonbutton> button class="btn">Buttonbutton> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const buttons = document.querySelectorAll('.btn'); for (const button of buttons)  // ✅ Set the disabled attribute button.setAttribute('disabled', ''); // ✅ Remove the disabled attribute // button.removeAttribute('disabled'); > 

We used the document.querySelectorAll method to select all elements with a class of btn .

We used the for. of loop to iterate over the collection and set the disabled attribute on each element.

# Removing the disabled attribute from multiple elements

Note that you should only call the removeAttribute() method on DOM elements. If you need to remove the disabled attribute from a collection of elements, you have to iterate over the collection and call the method on each individual element.

Here is the HTML for the next example.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> head> body> button disabled class="btn">Buttonbutton> button disabled class="btn">Buttonbutton> button disabled class="btn">Buttonbutton> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const buttons = document.querySelectorAll('.btn'); for (const button of buttons)  // ✅ Remove disabled attribute from button button.removeAttribute('disabled'); > 

We used the document.querySelectorAll method to select all elements with a class of btn .

We used the for. of loop to iterate over the collection and remove the disabled attribute from each element.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник

Button disabled Property

The disabled property sets or returns whether a button is disabled, or not. A disabled element is unusable and un-clickable. Disabled elements are usually rendered in gray by default in browsers. This property reflects the HTML disabled attribute.

Browser Support

Syntax

Property Values

Technical Details

More Examples

Example

Find out if a button is disabled or not:

Example

Disable and enable a button:

function disableBtn() <
document.getElementById(«myBtn»).disabled = true;
>

function enableBtn() document.getElementById(«myBtn»).disabled = false;
>

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник