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

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

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

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

Answer 2

在v1.0.0-beta中，仅在标签标记内带有跨度环绕文本的复选框有效。

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

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

Answer 3

它没有工作，因为你有错误的结构，把checkbox放在label旁边而不是在里面，并将它们都包裹在p < / p>

＆＃13;

<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>

＆＃13;

Answer 4

已加载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

Answer 5

根据版本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

Answer 6

2019-1.0版

我喜欢Materialise的简洁，但是出现了问题。

尝试通过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的想法并不理想。我有一个已实现的站点，不再做。

Answer 7

有同样的问题，但遵循了文档。复选框被选中，但我无法触发输入上的 onChange 事件。看起来不错，但没有以受控形式（React）做任何事情。我不想完全从头开始设计样式，但这是绝对必要的。

Answer 8

在版本中实现1.0

在JS中 1）通过document.getElementById查找输入... 2）检查输入。选中

input.checked为false或true

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

8 个答案: