javascript - 通过 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

仅仅改变类只会改变它的显示方式，它不会禁用按钮。同样，仅设置 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();