通过javascript删除“ disabled”属性后，html input元素仍使用“ disabled”样式

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 Design

---

** **更新

jsfiddle （*我在js文件上编辑了一些语法）

我想要实现的是

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

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

Answer 1

这是固定版本代码的摆弄：

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

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

您的第二个问题是inputs [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