使用切换按钮替代复选框（Rails，Twitter Bootstrap，Simple_form）

Question

使用切换按钮替代复选框（Rails，Twitter Bootstrap，Simple_form）

ruby-on-railstwitter-bootstrapsimple-form

13

我正在使用 Simple_form、Twitter Bootstrap 和 Rails 3.2.2。

有人知道在 Simple_form 中是否有一种方法可以在布尔字段上使用 Bootstrap 的 "toggle button" 选项吗？我想用按钮替换复选框。

这是我在表格中尝试过的：

<%= f.input :client_approved, :input_html => { :class => 'btn btn-primary', :data => {:toggle => 'button'} } %>

以下是HTML输出：

<input class="boolean optional btn btn-primary" data-toggle="button" id="id_card_design_client_approved" name="id_card_design[client_approved]" type="checkbox" value="1">

任何关于如何将一个按钮标签分配给simple_form输入的想法吗？

- prodigerati

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jules Copeland · Accepted Answer

我想出了一种基于JS的方法...我知道它可能不是最好的方法，但它能够发挥作用...

在您的视图文件中，添加类似以下内容的代码：

<div id="client_approved_buttons" class="btn-group" data-toggle="buttons-radio">
  <%= f.input : client_approved, as: :hidden %>
  <a class="btn" data-value="1">Yes</a>
  <a class="btn" data-value="0">No</a>
</div>

然后在您的JS文件中添加以下内容：

// make button toggles update hidden field
$('.btn-group a').on('click', function(event){
  event.preventDefault();
  var input = $(this).siblings('.control-group').find('input[type=hidden]');
  if(input.length>0){
    if(input.val().toString() !== $(this).data('value').toString()){
      input.val($(this).data('value')).trigger('change');
    }
  }
});