javascript - 禁用 Material Design Lite 切换开关

Question

我正在尝试使用 JavaScript 在页面上创建一些元素，并用新的 Material Design Lite 来装饰它们。 。这一切都有效，直到我尝试在创建元素后以编程方式开始禁用元素。

我有一些切换开关(由 JavaScript 创建)。当一个开关打开时，我希望其他开关被禁用。

如果我使用:

toggle2.disabled = true;

它工作得很好，但被禁用了，但是当我像这样尝试时:

setInterval(function(){ 

if (toggle1.checked == true) {
    toggle2.disabled = true;
} else {
    toggle2.disabled = false;
}

}, 1000);

toggle2 在视觉上仍然处于事件状态，波纹效果有效，但它不会滑动到“开”，因此它在后台被禁用，只是视觉上不可见。

这是一个JSFiddle例如(使用 HTML 元素，但我的 JS 创建的元素也会发生同样的情况)

另外，这里有一个 video of the problem 。其中，第三个向下由 toggle3.disabled = true; 禁用，第四个向下由 IF 语句根据第二个向下的状态禁用。

我不知道是我做错了什么还是这是 MDL 本身的错误。

谢谢

Answer 1

您需要向上查询该元素，然后对其调用MaterialCheckbox.disable()。就像这样:

document.querySelector('#my-checkbox').MaterialCheckbox.disable()

Disable 是复选框组件(作为小部件实现)提供的一种方法，因此创建的所有额外元素内部所需的内容都可以得到正确处理。