html input element still using “disabled” style, after remove “disabled” attribute via javascript

Question

I have several inputs element. When the page load, I disabled the input. Then when the user click edit, remove the disabled attribute so the user can edit it. But when the edit button is pressed and the disabled is removed, the input style still using disabled input style. How can I fix this?

js:

document.querySelector('#enable-update').addEventListener('click', function () {
    var i;
    var inputs = document.querySelectorAll('#manage-data input');
    for (i=0; i < inputs.length ; i++){
        inputs[i].disabled = false;
    }
    inputs[0].focus();

    var textareas = document.querySelectorAll('#manage-data textarea');
    for (i=0; i < textareas.length ; i++){
        textareas[i].disabled = false;
    }

    this.style.display = 'none';
});

html:

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input disabled class="mdl-textfield__input" type="text" id="name" name="name" value="user">
    <label class="mdl-textfield__label" for="name">Nama</label>
</div>

PS : I'm using Material Lite Design

---

**Update**

jsfiddle (*I edit some syntax on the js file)

what I want to achieve is make this

to this (notice the "name" text is blue)

when i check the inspect element, it show this (notice the "fieldset[disabled]" but the input don't have disabled attribute)

Answer 1

Here is a fiddle with the fixed version of your code:

https://jsfiddle.net/5kpqsc9t/4/

Your first problem is that you were selecting inputs inside #manage-data, but didn't add that ID to the wrapping div.

Your second problem was the inputs[0].focus(); outside the for loop.

There is no need for var i; when you declare it inside the for loop.

document.querySelector('#enable-update').addEventListener('click', function () {
    var inputs = document.querySelectorAll('#manage-data input');
    for (var i = 0; i < inputs.length ; i++){
        inputs[i].disabled = false;

        inputs[i].focus();
    }
    this.style.display = 'none';
});

And the HTML:

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label" id="manage-data">
    <input disabled class="mdl-textfield__input" type="text" id="name" name="name" value="user">
    <label class="mdl-textfield__label" for="name">Nama</label>
</div>

<button id="enable-update">
Enable
</button>

Answer to edit

The color that you think means it's disabled is the color that material design makes input fields. In the 'Elements' section in chrome, you can see that:

fieldset[disabled] .mdl-textfield .mdl-textfield__input

Is a light grey, being that's not what is being targeted.

What is being targeted is:

.mdl-textfield.is-disabled .mdl-textfield__input