webentwicklung-frage-antwort-db.com.de

Das Kontrollkästchen funktioniert nicht mit materializecss - HTML, CSS

Ich scheine das Kontrollkästchen nicht zu aktivieren, während ich materialisecss verwende, da jemand anderes dieses Problem durchquert hat und es geschafft hat, es zu beheben?

Die Bibliothek, die ich verwende: 

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

Checkbox ohne Bibliothek - https://jsfiddle.net/d2yk4sbv/2/

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

Ankreuzfeld mit Bibliothek - 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>

Das Kontrollkästchen scheint ohne die Bibliothek gut zu funktionieren, aber das Problem ist, meine Anwendung hängt von der Verwendung von materializecss ab, daher kann ich es mir nicht leisten, es nicht zu verwenden :(

Link zur materializecss-Website - http://materializecss.com/

7
Jackie

Arbeit sein Es scheint, als müssten Sie eine Beziehung zwischen dem Label und der Eingabeprüfung setzen. Warum versuchst du es nicht auf diese Weise?

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

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

7
Kenry Sanchez

In Version 1.0.0-beta funktioniert das Ankreuzfeld innerhalb des Label-Tags nur, wenn der Text um den Bereich gewickelt ist.

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

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

5
SmartManoj

es funktioniert nicht, weil Sie die falsche Struktur haben. Setzen Sie die checkbox neben die label und nicht in diese und wickeln Sie beide in eine p-Datei ein.

<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

Das reguläre HTML5-Kontrollkästchen wird nicht mit geladenem materialcss angezeigt. 

dies ist ein reguläres HTML5-Kontrollkästchen. 

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

Bis heute 2018 mit 1.0 funktionieren alle obigen Antworten nicht mehr, außer dieser. 

Sie müssen der Beschriftung, der Eingabe und der Spannenstruktur folgen, um funktionieren zu können!

gutschrift an @SmartManoj

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

https://materializecss.com/checkboxes.html

2
hoogw

Ab Version 0.100.2 besteht die Lösung darin, die folgende CSS-Klasse hinzuzufügen:

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

Beachten Sie, dass die Struktur in dieser Version sein muss:

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

Quelle: https://github.com/Dogfalo/materialise/issues/5062

0
Z. Khullah