我正在尝试使用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。其中,根据第二个down的状态,使用toggle3.disabled = true;禁用第三个down的状态,使用IF语句禁用第四个down的状态。

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

谢谢

最佳答案

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

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

禁用是复选框组件(作为小部件实现)提供的一种方法,因此可以正确处理内部所需的所有额外元素。

10-05 21:06
查看更多