我正在尝试使用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()
禁用是复选框组件(作为小部件实现)提供的一种方法,因此可以正确处理内部所需的所有额外元素。