ruby-on-rails - 使用切换按钮代替复选框(Rails、Twitter Bootstrap、Simple_form)

Question

我正在使用 Simple_form、twitter bootstrap 和 rails 3.2.2

有谁知道是否有办法在 simple_form 中的 bool 字段上使用“切换按钮”选项进行 Bootstrap ？我想用按钮替换复选框。

这是我到目前为止以形式(rails)尝试过的内容:

<%= 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 输入的任何想法？

Answer 1

我提出了一种基于 JS 的方法……我确信这不是最好的方法，但它确实有效……

在您的 View 文件中，添加以下内容:

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