将简单表单​​复选框转换为切换开关

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>

我发现了一个漂亮而简单的材质设计切换开关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();
});