通过 JavaScript 动态禁用 MDL 文本框

Question

我需要通过 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。

有没有一种方法可以用不太激烈的方法来实现这一目标？任何帮助将非常感激。

Answer 1

仅更改类只会更改其显示方式，不会禁用该按钮。同样，仅设置禁用属性将禁用它，但不会改变它的外观。正确的方法是使用 上的内置方法disable和enable方法MaterialCheckbox。所以如果这是你的复选框

<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="checkbox-2">
    <input type="checkbox" id="checkbox-2" class="mdl-checkbox__input">
    <span class="mdl-checkbox__label">Checkbox</span>
</label>

那么这就是禁用它的方法

document.getElementById("checkbox-2").parentNode.MaterialCheckbox.disable();

这就是启用它的方法

document.getElementById("checkbox-2").parentNode.MaterialCheckbox.enable();

Answer 2

编辑：请参阅 Matthew 的其他答案，该答案在 2022 年已过时。

当输入元素的值以编程方式更改时，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”（用于无效输入）和其他一些类。

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

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