Google Material Design - 禁用开关答案

【问题标题】：Google Material Design - disabling a switchGoogle Material Design - 禁用开关
【发布时间】：2018-07-26 17:29:01
【问题描述】：

我找不到任何实际的基于 Web 的代码示例来演示如何禁用 Google Material Design JavaScript 的开关。

我试过foo.setAttribute('disabled');、foo.setAttribute(disabled);和foo.setAttribute('state', 'disabled');都没有成功。

【问题讨论】：

【解决方案1】：

所以我尝试了 benvc 的解决方案以及它的大量不同变体，但没有成功 - 我确信这只是我正在使用的代码的一些时髦。

我最终通过更改元素的 CSS 属性来禁用开关：

elem.setAttribute("style","pointer-events: none;");

【讨论】：

【解决方案2】：

您可以通过将 disabled 属性设置为 true 来使用 javascript 禁用材料设计组件开关。

const elem = document.querySelector('#switch-id');
elem.disabled = true;

【讨论】：

【解决方案3】：

var switch = new mdc.switchControl.MDCSwitch(document.getElementByclassName('mdc-switch'));

//用于启用 switch.disabled = false;

//禁用 switch.disabled = true;

【讨论】：