Materialise css复选框在rails app中不起作用

Question

我正在尝试向表单添加复选框,供用户选择他们想要的工作室,但我无法显示复选框.我正在使用Materialise Css gem和rails.

我的表格是下一个:

<div class="row">
  <% workshops = Workshop.all.order("date") %>
  <% workshops.each do |workshop| %>
    <div class=" col m4 s6">
      <%= f.label "#{workshop.name} \n\r #{workshop.date}", for:"workshop_id", id:"workshop_id" %>
      <%= f.check_box :workshop_id, id:"workshop_id" %>
    </div>
  <% end %>  
  <div class="actions col m6 s12">
    <br>
    <br>
    <br>
    <%= f.submit "Save", class:"btn green"%> 
  </div>
</div>

我曾尝试使用和不使用ID和用于输入和标签中的属性,但似乎没有任何工作.我错过了什么吗？

编辑1

从Materialise css显示的css如下:

[type="checkbox"]:not(:checked), [type="checkbox"]:checked {
    position: absolute;
    left: -9999px;
    visibility: hidden;
}

Answer 1

该解决方案,就这么简单,因为它是...是改变的顺序<input>和<label>

所以代替:

<%= f.label "#{workshop.name} \n\r #{workshop.date}", for:"workshop_id", id:"workshop_id" %>`
<%= f.check_box :workshop_id, id:"workshop_id" %>`

正确的方式是:

<%= f.check_box :workshop_id, id:"workshop_id" %>
<%= f.label "#{workshop.name} \n\r #{workshop.date}", for:"workshop_id", id:"workshop_id" %>

解决了.

Answer 2

就我而言,我意识到我在div中使用了带有"输入字段"类的复选框,它正在破坏它.

千万不要把复选框输入字段内<div class="input-field col s12 m3"></div>