2

我正在尝试使用 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 元素也是如此）

另外，这里是问题的视频。其中，第三个 down 被禁用，toggle3.disabled = true;第四个被 IF 语句禁用，基于第二个 down 的状态。

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

谢谢

4

2 回答 2

4

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

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

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

于 2015-07-13T00:20:57.050 回答
0

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

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

您尝试这样做是错误的。对象没有 disabled 属性。您应该通过 JQuery 以这种方式设置它：

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

我已经更新了你的 JSFiddle。

你不需要使用SetInterval. 只需订阅change.#toggle1

于 2015-07-09T15:52:44.927 回答