Enable/disable a button in pure javascript

Question

I want to enable/disable a button without jquery. Here's my code:

btn.setAttribute("disabled", true); 

Works. But this doesn't -- a button remains disabled:

btn.setAttribute("disabled", false); 

Answer 1

disabled is a Boolean attribute. The mere presence of it causes the element to be disabled regardless of what the value of that attribute actually is. This is why you are able to disable the element in JavaScript by setting the attribute to true, you could have set it to anything (and that is the reason why when you set it to false it remains disabled).

<input type="button" value="I'm disabled" disabled="true"> <input type="button" value="I'm disabled" disabled="false"> <input type="button" value="I'm disabled" disabled="doesn't matter"> <input type="button" value="I'm disabled" disabled="">

With Boolean attributes, you don't even need to set a value at a for the attribute at all:

<input type="button" value="I'm disabled" disabled>

However the recommended convention with Boolean attributes (if you do want to provide a value for the attribute), so that we can have some consistency among developers, is to set their value equal to the attribute name itself. So, to disable an element, by working with its attribute, in JavaScript, following recommended conventions:

element.setAttribute("disabled", "disabled"); 

Therefore, to enable an element, you don't set the disabled attribute to any value, because as we've seen, that will just disabled it, you need to remove the disabled attribute completely:

element.removeAttribute("disabled"); 

document.querySelector("input[type='button']").removeAttribute("disabled");

<input type="button" value="I'm NOT disabled" disabled="disabled">

---

Now, when working with DOM objects in JavaScript, there are two ways to affect the current state of an element and it's important to understand the effects of working with these two techniques:

1. Work with the element's current HTML state (which is done with setAttribute(), removeAttribute(), and getAttribute()).
2. Work with element's current DOM Object state (which is done with the JavaScript property that represents the current state) of the element in memory.

Most importantly, the JavaScript object property value can be different than the HTML element attribute value. This can be confusing but the HTML state is what the element looks like from the outside and the property state is what is really happening on the inside, like you can put a happy face on so that people who look at you think your happy (the HTML state), but you might actually be sad for real (the property state).

When the property state hasn't been set, the attribute state is all that matters and will have total control over the state of the element. When the property state is set, it overrides whatever the attribute state may be and controls the actual state of the element.

// Get a reference to the button var btn = document.querySelector("[type=button]");  // Test what the current HTML state is: console.log(btn.getAttribute("disabled"));  // Test what the current mapped property state is: console.log(btn.disabled);  // Change the property state, which will override the HTML state and  // and cause it to become enabled. btn.disabled = false;  // Test what the current HTML state is: console.log(btn.getAttribute("disabled"));  // null because property overrode HTML  // Test what the current mapped property value is: console.log(btn.disabled);

<input type="button" value="I'm disabled" disabled="disabled">

From MDN:

To enable the element, leave this attribute out entirely as opposed to setting the value to false.