复选框不适用于 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/

原文由 Jackie 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

去工作。似乎您需要在标签和输入检查之间建立关系。你为什么不这样试试

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

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

原文由 Kenry Sanchez 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在 v1.0.0 中，文本环绕在 span 周围的标签标签内的复选框才有效。

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

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

  <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

    <!-- Compiled and minified JavaScript -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>


   Checkbox:  <br/>

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

原文由 Smart Manoj 发布，翻译遵循 CC BY-SA 4.0 许可协议