通过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函数工作的感觉。

有没有更简单的方法来实现这个功能？非常感谢您的帮助。

- kweensey

Answer 1

仅仅改变类名只会改变样式，但不会禁用按钮。同样地，仅仅设置disabled属性可以禁用它，但不会改变外观。正确的方法是在MaterialCheckbox上使用内置的disable和enable方法。因此，如果这是你的复选框：

<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();

- Matthew

---

这应该是被接受的答案。实际上，对于文本字段，它是MaterialTextfield。无论如何+1。 - Stephan Ahlf

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”（用于无效输入）和其他一些。

对于使用此库的项目，我创建了一个小助手函数，它会扫描元素下的输入字段并重新评估类别。在动态加载数据后，我调用助手函数，它会处理表单的样式修复。

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

- Michael Powers

---

因为这个不起作用而被踩：CSS会使它看起来像是被禁用了，但实际上并没有禁用复选框。 - Matthew

问题提到元素已经被禁用。问题在于通过DOM进行更改后，视觉样式不正确。您的答案也可以解决问题，但会重新禁用该元素。这并不是一个错误的答案，您回答了比问题要求更多的内容。 - Michael Powers

2022年更新，MDL文档现在指出可以动态添加或删除标准的disabled属性。 - NGauthier