web-dev-qa-db-fra.com

La case à cocher ne fonctionne pas avec materializecss - HTML, CSS

Je n'arrive pas à faire cocher la case tout en utilisant le matériel, car quelqu'un d'autre a rencontré ce problème et a réussi à le résoudre?

La bibliothèque que j'utilise: 

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

Case à cocher sans bibliothèque - https://jsfiddle.net/d2yk4sbv/2/

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

Case à cocher avec bibliothèque - 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>

La case à cocher semble bien fonctionner sans la bibliothèque, mais le problème est que mon application dépend de l'utilisation du matériel, je ne peux donc pas me permettre de ne pas l'utiliser :(

Lien vers le site Internet de materializecss - http://materializecss.com/

htmlcsscheckboxmaterialize
7
Jackie

Être travail Il semble que vous deviez mettre une relation entre l'étiquette et le contrôle d'entrée. Pourquoi n'essaies-tu pas de cette façon

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

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

7
Kenry Sanchez

Dans la version 1.0.0-bêta, la case à cocher située à l'intérieur de la balise d'étiquette avec le texte entouré d'envergure ne fonctionnera que.

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

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

5
SmartManoj

ça ne marche pas parce que vous avez la mauvaise structure, mettez la checkbox à côté de la label et non à l'intérieur, et enveloppez les deux dans une 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

La case HTML5 normale ne s'affichera pas avec materialcss chargé. 

c'est une case à cocher html5 normale. 

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

En ce qui concerne aujourd’hui 2018, avec 1.0, toutes les réponses ci-dessus ne fonctionnent plus, sauf celle-ci. 

Vous devez suivre l'étiquette, la saisie, la structure d'envergure pour être efficace!

crédit à @SmartManoj

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

https://materializecss.com/checkboxes.html

2
hoogw