复选框在使用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

Answer 1

在v1.0.0中，只有将复选框放在label标签内，并且用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

---

对于使用1.0.0及以上版本的用户来说，这是一个好答案。自0.100以来，结构发生了变化。 - Nyaarium

OP的问题是关于0.100.2版本的。 - Bernardo Dal Corno

Answer 2

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

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

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

- Kenry Sanchez

---

对于Materialize 1.0 请参见答案 - Legends

没有一个选项与materialize.css 1.0.0兼容，我的复选框位于数据表内，但不透明度始终为0，即使我更改它以便看到复选框，我也无法单击它来更改值。真的很奇怪。 - djack109

Answer 3

当使用materialcss时，普通的HTML5复选框将无法显示。

这是普通的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

- hoogw

Answer 4

由于结构错误，所以它无法工作，请将 checkbox 放在 label 旁边而不是里面，并将它们都包裹在 p 中。

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css" rel="stylesheet" />
<p>
  <input type="checkbox" id="test" checked="checked" />
  <label for="test">Hello</label>
</p>

- Taki

Answer 5

2019 - 版本 1.0

我喜欢Materialize的简洁风格，但它存在问题。

尝试通过Ajax传递复选框。

if(state.success === true) {
                        tbody.append('<tr><th scope="row" style="background-color:' + state['color'] + 
                            '"><label><input type="checkbox" /><span>Red</span></label></th><td>' + state['date'] +
                            '</td><td>' + state['priority'] + '</td><td>' + state['name'] + 
                            '</td><td>' + state['desc'] + '</td><td>' + state['email'] + '</td></tr>'); 
                    } 

必须将此添加到CSS样式中。

[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
    position: absolute;
    opacity: 1;
    pointer-events: auto;
}

这种覆盖常见 HTML 和 CSS 标准以适应他们的 JS 的想法并不理想。我有一个使用 materialize 稳定的网站，不会再这样做了。

- user2060451

Answer 6

根据0.100.2版本，解决方案是添加这个CSS类：

.input-field label {
  pointer-events: auto !important;
}

请注意，此版本中的结构必须是：

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

来源：https://github.com/Dogfalo/materialize/issues/5062

- Bernardo Dal Corno

Answer 7

我能想到的唯一方法是这样做，才能使复选框显示并且可点击。

[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
    position: unset;
    opacity: 1;
    pointer-events:all
}

我没有得到任何动画，但老实说我不在乎了，我没有更多时间浪费在应该很简单的事情上。以上的解决方案都对我无效。

- djack109

Answer 8

在 Materialize 1.0 版本中

在 JS 中 1）通过 document.getElementById 找到输入框... 2）检查 input.checked

input.checked 可能是 false 或 true

- Anton Komarov

---

请添加一个代码片段作为问题作者的示例。然后你的回答将会更有用。 - Niek Nijland