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 correct convention with Boolean attribute values (if you do want to provide a value for the attribute), is to set their value to either an empty string or a value that is equal to the attribute name itself. So, to disable an element, by working with its attribute, in JavaScript, following the standard:

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.

Answer 2

function getElement(elm){
    return document.getElementById(elm);
}

/*-------------FUNCTION TO DISABLE AN TEXT BOX------------------*/
function disable(elm){
    return getElement(elm).setAttribute("disabled", true);
}
//==============================================================//
/*--------------FUNCTION TO ENABLE AN TEXT BOX------------------*/
function enable(elm){
    return getElement(elm).removeAttribute("disabled");
}
//==============================================================//

function disableEnable(){
      if(getElement("button").disabled){
            enable("button");
            enable("input-button");
      }
      else{
            disable("button");
            disable("input-button");
      } 
}

<button id="button">Button</button>
<input id="input-button" type="button" value="Input Button"/>

<br/><br/><br/>
<button onClick="disableEnable();"> Disable/Enable Buttons Above</button>

Answer 3

btn.removeAttribute("disabled");

Answer 4

It’s worth noting that some time ago, the toggleAttribute method has been added, so you can keep it a bit more concise:

document.getElementById('toggle').addEventListener('click', event => {

    document.getElementById('btn').toggleAttribute('disabled');

});

<button type="button" id="btn">button</button>
<button type="button" id="toggle">toggle</button>

Note that it also has an optional force attribute to let you provide a boolean to decide the direction of enabling/disabling.

The method even provides a return value: a boolean whether or not the attribute is present after its operation.

Answer 5

element.disabled = true
element.disabled = false

This is perfectly valid and works as you'd expect - i.e. does not disable the element when set to true as the accepted answer suggests.