禁用 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本身的bug。

谢谢

Answer 1

给你加个disabled HTML属性就可以了 <input>:

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

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

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

我更新了 your JSFiddle。

您不需要使用 SetInterval。只需订阅 #toggle1 的 change 事件。

Answer 2

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

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

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

Disabling Material Design Lite toggle switch