如何将开关切换按钮添加到rails中的简单表单答案

【问题标题】：How to add a switch toggle button to simple form in rails如何将开关切换按钮添加到rails中的简单表单
【发布时间】：2017-01-28 09:17:53
【问题描述】：

我正在使用 Rails 4 和带有 Bootstrap 的简单表单。

我希望我的复选框不会这样：

<%= c.input :my_bool_field, label: false, class: "form-control" %>

但类似的东西（我有 CSS）

<label class="switch switch-primary">
    <input type="checkbox" />
    <span></span>
</label>

我知道我可以使用 simple_form 包装器，但我发现它们有点令人困惑。有人可以帮助我创建具有该样式的复选框吗？

【问题讨论】：

你最后是怎么解决你的问题的？

标签： html css ruby-on-rails twitter-bootstrap simple-form

【解决方案1】：

您能否转到此链接并查看“开关”。 getbootstrap.com

希望这个例子对你有帮助，我目前使用的是 Bootstrap 4.3 和 Rails 5.2；

以模型的形式使用“自定义开关”并使其正常工作：

-- 模型/_form.html.erb

<%= form_with(model: employee, local: true) do |form| %>
 <div class="custom-control custom-switch">
    <%= form.check_box :active, class: "custom-control-input", id: "customSwitch1"   %>
  <label class="custom-control-label" for="customSwitch1">Status: </label>
 </div>
 <div class="actions">
     <%= form.submit %>
 </div>
<% end %>

希望对你有所帮助，我是 Rails 和 Bootstrap 的新手。

问候！

【讨论】：

【解决方案2】：

我发现这个项目非常有用且完整。它基于 twitter 引导程序：http://www.bootstraptoggle.com/

有一个 rails gem 嵌入了它：

【讨论】：

虽然这在理论上可以回答问题，it would be preferable 在这里包含答案的基本部分，并提供链接以供参考。

【解决方案3】：

把复选框放在里面

<label class="switch switch-primary">
     <%= f.input_field :my_bool_field, label: false, as: :boolean, class: 'form-control' %>
    <span></span>
</label>

【讨论】：

谢谢！切换按钮出现是一个很大的进步，但它对点击没有反应。这是生成的代码：<label class="switch switch-primary"> <input value="0" type="hidden" name="designer[company_attributes][email_monthly_summary]"><label><input label="false" class="boolean optional form-control user-success" type="checkbox" value="1" checked="checked" name="designer[company_attributes][email_monthly_summary]" id="designer_company_attributes_email_monthly_summary"></label> <span></span> </label>
那是因为跨度在标签之外。标签和输入的顺序是关闭的。知道如何解决这个问题吗？
嗨@GuyDubrovski 试图跟随这里....你得到这个工作了吗？或寻找其他解决方案？

【解决方案4】：

查看位于 https://github.com/abpetkov/switchery 的 Rails Switchery gem

无需尝试通过初始化程序或在视图中调用 jquery 函数来更改 simpleforms 预构建的包装器，即可轻松自定义引导程序和 ios 样式切换。

【讨论】：

nope.. 上面的代码正在生成：<div class="checkbox"><input value="0" type="hidden" name="designer[company_attributes][email_monthly_summary]"><label><input class="boolean optional user-success" type="checkbox" value="1" checked="checked" name="designer[company_attributes][email_monthly_summary]" id="designer_company_attributes_email_monthly_summary"></label></div>
你使用了 input_field 还是只使用了 c.input？ Input_field 应该去掉 div 包装器。
还有一个 js 函数可以工作，但您可能会发现最简单的方法是使用此处找到的 switchery-gem：github.com/abpetkov/switchery
switchery-gem 是一个很好的答案 - 请成为答案而不是评论。