Materialize CSS 复选框在 Rails 应用中无法正常工作

Question

我想在表单中添加复选框，以供用户选择他们想要的研讨会，但是我无法使复选框显示。我正在使用Materialize 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 来自Materialize css的css如下：

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

- LuigiAlver

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" %>

解决了。

- LuigiAlver

Answer 2

在我的情况下，我意识到我在使用带有"class=input-field"的div内部的复选框，这会导致它出现问题。 不要将复选框输入字段放在<div class="input-field col s12 m3"></div>中。

- Sandeep Kumar

---

如果我不在输入字段div中放置复选框，则它与同一行中的其他输入无法垂直对齐。而且，它并没有破坏（至少我的）复选框。在您的情况下，这可能是多种因素的组合，而不是直接使用input-field包装器。 - silverdr

Answer 3

使用复选框和Materialize CSS时出现了同样的问题。对我来说，以下内容可解决该问题。

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

- Werner

Answer 4

这对我有用：

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

- Agile Nerd

---

https://medium.com/@alishersadikov/materializecss-upgrade-dbe789197411 这篇文章有更多细节。 - oaamados

这似乎是目前在新版本的MaterializeCSS中工作的唯一解决方案。 - doer123456789

Answer 5

更新当前（撰写时）的MaterializeCSSS。在MaterializeCSS v1.0之前（或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后寻找损坏的复选框，请参考此问题。

- silverdr