Material Design Lite 的复选框不适用于列表

Question

我制作了一个简单的网页，它从 Firebase 检索数据并显示在列表中...我正在使用 Material Design Lite 框架使页面更加美观。一切正常，但唯一的问题是复选框按钮没有 material 设计。有人知道会发生什么吗？

我遵循了 MDL 网站中的示例 "Avatars and controls"：https://getmdl.io/components/index.html#lists-section 并转换为 JavaScript 代码。这是我的代码：

var ul = document.getElementById(list);
var li = document.createElement("li");
var span = document.createElement("span");
var spanCheckbox = document.createElement("span");
var label = document.createElement("label");
var input = document.createElement("input");
input.setAttribute("type", "checkbox");
input.setAttribute("id", (i + 1));
input.setAttribute("class", "mdl-checkbox__input");
input.setAttribute("onclick", "done(this.id)");
if (list === "solved") input.setAttribute("checked", "true");
componentHandler.upgradeElement(label);
label.setAttribute("class", "mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect");
label.setAttribute("for", (i + 1));
spanCheckbox.setAttribute("class", "mdl-list__item-secondary-action");
ul.setAttribute("class", "demo-list-control mdl-list");
li.setAttribute("id", (i + 1));
li.setAttribute("onclick", "done(this.id)");
li.setAttribute("class", "mdl-list__item clearList");
span.setAttribute("class", "mdl-list__item-primary-content");
span.appendChild(document.createTextNode(description));
label.appendChild(input);
spanCheckbox.appendChild(label);
li.appendChild(span);
li.appendChild(spanCheckbox);
ul.appendChild(li);

我已经使用 Chrome 开发人员工具检查了复选框的 HTML，它等于 Material Design Lite 网站示例的 HTML。任何其他事情都正常，所以这不是 js 或 css 文件的问题。

Chrome开发者工具中HTML的代码，页面加载后：

<span class="mdl-list__item-secondary-action">
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="1"><input type="checkbox" id="1" class="mdl-checkbox__input" onclick="done(this.id)" checked="true">
</label>
</span>

Answer 1

已解决：componentHandler.upgradeElement(label); 创建标签后需要保留。

Material Design Lite 的复选框不适用于列表

Checkbox of Material Design Lite isn't works on lists

javascript

html

css

checkbox

material-design-lite