javascript - html 输入元素仍然使用 "disabled"样式，通过 javascript 删除 "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 文件上编辑了一些语法)

我想要实现的是让这个

为此(注意“名称”文本是蓝色的)

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

Answer 1

这是固定版本代码的 fiddle :

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>

编辑答案

你认为它被禁用的颜色是 Material 设计使输入字段的颜色。在 chrome 的“元素”部分，您可以看到:

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

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

目标是:

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