web-dev-qa-db-ja.com

materializecssでチェックボックスが機能しない-HTML、CSS

マテリアライズを使用している間、チェックボックスを機能させることができないようです。他の誰かがこの問題を乗り越えて修正できたのですか？

私が使用しているライブラリ：

<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 Webサイトへのリンク- http://materializecss.com/

htmlcsscheckboxmaterialize
12
Jackie

仕事になります。ラベルと入力チェックの間に関係を置く必要があるようです。このように試してみませんか

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

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

8
Kenry Sanchez

V1.0.0-betaでは、ラベルタグ内のチェックボックスは、スパンを囲むテキストでのみ機能します。

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

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

7
SmartManoj

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

4
hoogw

間違った構造になっているため機能していません。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>
2
Taki

バージョン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

0
Z. Khullah