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

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文件上编辑了一些语法）

我想要实现的是制作这个

到此（注意“名称”文字是蓝色）

当我检查inspect元素时，显示此信息（注意“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>

回答编辑

您认为它被禁用的颜色是材质设计输入字段的颜色。在＆＃39;元素＆＃39;在chrome中，您可以看到：

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

浅灰色，不是目标。

目标是：

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