javascripthtmlcss

Enable/disable a button in pure javascript

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);
Solution

  • 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 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("The initial HTML state is:", btn.getAttribute("disabled"));

// Test what the current mapped property state is:
console.log("The initial mapped property state for 'disabled' is:", btn.disabled);

// Change the property state, which will override the HTML state and 
// and cause it to become enabled. NOTE: the DOM property is Boolean, so in JavaScript, you use true/false unlike HTML.
btn.disabled = false;
console.log("(btn.disabled = false; just executed)");

// Test what the current mapped property value is:
console.log("Now the current mapped property value is:", btn.disabled);

 // Test what the current HTML state is:
console.log("Now, the current HTML state is:", btn.getAttribute("disabled"));  // null because property overrode HTML
    <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.