it-swarm.com.ru

Флажок не работает с materializecss - HTML, CSS

Кажется, я не могу заставить работать флажок во время использования 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/

7
Jackie

Быть работой. Кажется, вам нужно установить связь между меткой и проверкой ввода. Почему бы тебе не попробовать таким образом

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

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

7
Kenry Sanchez

В версии 1.0.0-beta флажок внутри тега label с текстом, обернутым вокруг span, будет работать только.

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

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

5
SmartManoj

это не работает, потому что у вас неправильная структура, поместите 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

Обычный флажок 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

2
hoogw