禁用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在视觉上仍处于活动状态，涟漪效果可以正常工作，但它不会滑动到ON，所以它在背景中被禁用，而不是在视觉上。

这是示例中的JSFiddle（使用HTML元素，但我创建的JS元素也是如此）

此外，这是一个video of the problem。在其中，第三个向下被toggle3.disabled = true;禁用，第四个被IF语句基于第二个向下状态禁用。

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

由于

Answer 1

您需要查询元素，然后在其上调用MaterialCheckbox.disable()。像这样：

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

禁用是复选框组件提供的方法（作为窗口小部件实现），因此内部需要创建的所有额外元素得到正确处理。

Answer 2

只需向disabled添加<input> HTML属性：

<input type="checkbox" id="toggle2" class="mdl-switch__input" disabled="disabled" />

你尝试这样做是错误的。对象没有禁用属性。你应该用JQuery这样设置它：

$('input#toggle2').attr('disabled', 'disabled');

我已更新your JSFiddle。

您不需要使用SetInterval。只需订阅change的{​​{1}}事件。