ruby-on-rails-3 - Rails 3 + 简单表单 + Bootstrap 单选和复选框作为按钮，带切换功能

Question

我正在尝试让我的 radio 和复选框作为带有切换功能的按钮工作，如 twitters Bootstrap 页面上所示。 link !

我设法让这些按钮出现并与数据库一起运行，但是当用户返回页面时，它们不会被切换。我想知道这是否可能。如果是，我该如何在我的代码上实现它？我正在使用 simple_form + twitter Bootstrap 。

这是我用来显示单选按钮的代码:

<div class="btn-group" data-toggle="buttons-radio">
<%= f.input :child_gender, :label => "Child gender?", :collection => [['Boy', 'Boy'], ['Girl', 'Girl'], :as => :radio_buttons, :input_html => { :data => {:toggle => 'buttons-radio'} }, :item_wrapper_class => 'btn btn-toggle btn-small inline' %>
</div>

这是复选框按钮的代码:

<div class="btn-group">
<%= f.input :child_size, :label => "What size?", :collection => child_size, :as => :check_boxes, :input_html => { :data => {:toggle => 'buttons-checkbox'} }, :item_wrapper_class => 'btn btn-toggle btn-small' %>
</div>

这是我为 btn-toggle 准备的自定义 css :

.btn-toggle input {
    display: none;
}

任何帮助表示赞赏。

Answer 1

从 Nickl 的答案构建并调整事物以不需要额外的 Javascript 并呈现 Bootstrap 当前期望的相同语义 HTML，这是我的解决方案:

class ButtonRadioInput < SimpleForm::Inputs::CollectionRadioButtonsInput
  def input
    out = '<div class="btn-group" data-toggle="buttons">'
    label_method, value_method = detect_collection_methods
    collection.each do |item|
      value = item.send(value_method)
      label = item.send(label_method)
      active = ''
      active = ' active' unless
          out =~ / active/ ||
          input_html_options[:value] != value &&
          item != collection.last
      input_html_options[:value] = value unless active.empty?
      btn = 'btn'
      btn = "btn btn-#{item.third}" unless item.third.nil?
      out << <<-HTML
        <label class="#{btn} #{active}">    
          <input type="radio" value="#{value}" name="#{attribute_name}">#{label}</input>
        </label>
HTML
    end
    out << "</div>"
    out.html_safe
  end
end

然后要使用它，您将使用 SimpleForm :

=f.input :role, label: false, as: :button_radio, 
                    collection: [["Warm Up", :warm_up, :primary],
                                ["Small Sided", :small_sided, :primary],
                                ["Expanded", :expanded, :primary],
                                ["Game", :game, :primary]]

这将像 Bootstrap's own components page 中的单选按钮示例一样呈现代码.