javascript - 通过 JavaScript 动态禁用 MDL 文本框

我需要通过 JS 禁用 Material Design Lite 文本字段。我知道我需要将元素升级到 MDL 检测更改。

我希望这样做:

$element.attr('disabled', 'disabled');
componentHandler.upgradeElement($element);

但这似乎不起作用。我以这个工作解决方案结束:

$element.attr('disabled', 'disabled');

let inputWrap = $element.parent();

inputWrap.attr('data-upgraded', '');
inputWrap.attr('class', inputWrap.attr('class').replace(/is-upgraded/g, ''));
inputWrap.attr('class', inputWrap.attr('class').replace(/is-focused/g, ''));

componentHandler.upgradeElement(inputWrap[0]);

它做到了，但我无法动摇我正在手动为 upgradeElement 函数做工作的感觉。

有没有办法用不那么激烈的方法来实现这一目标？任何帮助将非常感激。

最佳答案

当它们的值以编程方式更改时，MDL 不会动态地重新评估输入元素，而且我还没有找到要求它重新评估自身的好方法。

好消息是您不需要清理元素并再次调用 componentHandler.upgradeElement() ，您只需要向元素添加或删除适当的类，以便正确更改样式。

在您的情况下，您只需要将 'is-disabled' 类添加到禁用元素并将其从未禁用的元素中删除:

if (element.disabled) {
    element.parentNode.classList.add("is-disabled");
} else {
    element.parentNode.classList.remove("is-disabled");
}

还有其他类，例如“is-readonly”(用于只读字段)、“is-checked”(用于复选框)、“is-invalid”(用于无效输入)和其他一些类。

对于我使用这个库的项目，我制作了一个 small helper function，它将扫描元素下的输入字段并重新评估类。动态加载数据后，我调用辅助函数，它负责修复表单的样式。

可能有更好的方法来做到这一点，但我还没有找到。

关于javascript - 通过 JavaScript 动态禁用 MDL 文本框，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52892123/