在通过javascript删除“禁用”属性后，html输入元素仍然使用“禁用”样式

Question

我有几个输入元素。当页面加载时，我禁用了输入。然后当用户单击编辑时，删除disabled 属性以便用户可以编辑它。但是当按下编辑按钮并删除disabled 时，输入样式仍然使用禁用的输入样式。 我该如何解决这个问题？

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 : 我正在使用 Material Lite 设计

---

**更新**

jsfiddle (*我在js文件上编辑了一些语法)

我想要达到的目的是做到这一点

对此（注意“名称”文本为蓝色）

当我检查检查元素时，它会显示这个（注意“fieldset[disabled]”但输入没有禁用属性）

Answer 1

这里是你的代码的固定版本：

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

您的第一个问题是您在 #manage-data 中选择输入，但没有将该 ID 添加到包装 div。

您的第二个问题是输入[0].focus();在 for 循环之外。

不需要 var i;当您在 for 循环中声明它时。

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';
});

还有 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>

回答编辑

您认为禁用的颜色是材料设计制作输入字段的颜色。在 chrome 的“元素”部分，您可以看到：

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

是浅灰色，因为这不是目标。

目标是：

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