html - 将简单的表单复选框变成切换开关

Question

我在 simple_form_for 中有几个复选框:

<%= f.input :agree, label: "Agree with terms and conditions*" %>

输出以下 html:

<div class="form-group boolean optional enrollment_agree">
  <div class="checkbox">
    <input value="0" type="hidden" name="enrollment[agree]">
    <label><input class="boolean optional" type="checkbox" value="1" name="enrollment[agree]" id="enrollment_agree"></label>
  </div>
</div>

我找到了一个漂亮而简单的 Material 设计拨动开关 http://codepen.io/chrisota/pen/jWmqvx适用于以下 html:

<input id="toggle" type="checkbox" class="hide"/>
<label for="toggle"><span class="hide">Label Title</span></label>

如何让它在 rails 表单中工作？

Answer 1

向您的表单添加一个隐藏字段，并在发生切换时使用 javascript 更新隐藏字段的值。

JavaScript:

$('#toggle').change(function(evt) {
   $('#hidden_field').value = $(this).value();
});