物化css复选框在rails应用程序中不起作用答案

【问题标题】：Materialize css checkbox not working in rails app物化css复选框在rails应用程序中不起作用
【发布时间】：2016-01-11 14:26:39
【问题描述】：

我正在尝试将复选框添加到表单中，以便用户选择他们想要的研讨会，但我无法使复选框出现。我正在使用带有 Rails 的 Materialize Css gem。

我的表格是下一个：

<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;
}

【问题讨论】：

标签： css ruby-on-rails checkbox gem materialize

【解决方案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" %>

解决了。

【讨论】：

【解决方案2】：

在我的例子中，我意识到我在 div 中使用了带有“input-field”类的复选框，这破坏了它。

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

【讨论】：

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

【解决方案3】：

复选框和实现 css 的问题相同。这对我有用..

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

【讨论】：

【解决方案4】：

这对我有用：

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

【讨论】：

medium.com/@alishersadikov/materializecss-upgrade-dbe789197411 有更多详情
这似乎是目前唯一适用于新版 MaterializeCSS 的解决方案

【解决方案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 后查找损坏的复选框时发现此问题

【讨论】：