复选框无法使用materializecss - HTML,CSS

Question

在使用materializecss时,我似乎无法使用复选框,因为其他任何人都遇到了这个问题并设法修复它？

我正在使用的图书馆:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

没有库的复选框 - https://jsfiddle.net/d2yk4sbv/2/

     <div><label> <input type=checkbox> label 1 </label></div>

带库的复选框 - https://jsfiddle.net/d2yk4sbv/

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
            <div><label> <input type=checkbox> label 1 </label></div>

复选框似乎没有库工作正常,但问题是,我的应用程序依赖于使用materializecss所以我不能不使用它:(

链接到materializecss网站 - http://materializecss.com/

Answer 1

在v1.0.0-beta中,带有文本的span标签内的复选框仅适用于span.

   <label>
        <input type="checkbox" />
        <span>Red</span>
   </label>

https://github.com/Dogfalo/materialize/issues/1376

Answer 2

要工作.看起来你需要在标签和输入检查之间建立关系.你为什么不试试这种方式

<div>
  <input type="checkbox" id="check">
  <label for="check">label 1</label>
</div>

http://materializecss.com/forms.html#checkbox

Answer 3

常规 HTML5 复选框不会在加载 materialcss 时显示。

这是常规的 html5 复选框。

     <input type="checkbox" name="nameOfChoice" value="1" checked>

至于今天的 2018 年，有了 1.0，以上所有答案都不再适用，除了这个。

您必须遵循标签、输入、跨度结构才能工作！

归功于@SmartManoj

<label>
    <input type="checkbox" />
    <span>Red</span>
</label>

https://materializecss.com/checkboxes.html