Materialise css 复选框在 rails 应用程序中不起作用

Question

我正在尝试将复选框添加到表单中，以便用户 select 他们想要的研讨会，但我无法显示复选框。我正在使用 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 和 for 属性，但似乎没有任何效果。我错过了什么吗？

编辑 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

复选框和实体化存在同样的问题 css。这对我有用..

<%= f.check_box :online %>
<%= f.label 'online', id:'online' %>

Answer 3

在我的例子中，我意识到我在 div 中使用复选框和 class "input-field" 这破坏了它。

不要将复选框输入字段放在 <div class="input-field col s12 m3"></div>

内

Answer 4

这对我有用：

<div class="input-field col s3">
  <label>
    <%= form.check_box :main, id:"main" %>
    <span>Principal?</span>
  </label>
</div>

Answer 5

当前（截至撰写本文时）MaterializeCSSS 的更新。在 MaterializeCSS pre-v1.0（或 pre-v0.100）时代，可以简单地说（HAML 语法，ERB 需要相同）

= f.collection_check_boxes :mymodel_ids, Mymodel.all, :id, :description

并在单行中有一组布局精美的集合复选框。自 v1.0.0（或 0.100.x - 不记得确切何时使用简单的复选框被破坏）获得相同的结果需要做：

= f.collection_check_boxes(:mymodel_ids, Mymodel.all, :id, :description) do |builder|
    %div
        = builder.label do
            = builder.check_box
            %span
                = builder.text

与单个复选框类似：

= address_fields.check_box :_destroy
= address_fields.label :_destroy, "#{t'users.edit.destroy'}"

变成

= address_fields.label :_destroy do
    = address_fields.check_box :_destroy
    %span
        = "#{t'users.edit.destroy'}"

以防有人在更新到 V1.0 后查找损坏的复选框时发现此问题

Materialise css 复选框在 rails 应用程序中不起作用

Materialize css checkbox not working in rails app

css

ruby-on-rails

checkbox

gem

materialize