用于引导的简单表单单选/复选框按钮组

Question

我的问题是我正在尝试将一组复选框格式化为一个按钮组 (Bootstrap documentation here)。我大部分时间都在工作，但我有 2 个问题

1. 嵌套标签
2. 我真的很想在 .btn-group 上添加 data-toggle="buttons" 以便引导按钮自动按应有的方式工作。

---

# app/inputs/bootstrap_check_box_button_group_input.rb
class BootstrapCheckBoxButtonGroupInput < SimpleForm::Inputs::CollectionCheckBoxesInput
  # Creates a radio button set for use with Bootstrap btn group

  def input
    label_method, value_method = detect_collection_methods
    iopts = {
      :checked => 1,
      :item_wrapper_tag => false,
      :collection_wrapper_tag => 'div',
      :collection_wrapper_class => 'btn-group add-data-toggle clearfix'
     }
    return @builder.send(
      "collection_check_boxes",
      attribute_name,
      collection,
      value_method,
      label_method,
      iopts,
      input_html_options,
      &collection_block_for_nested_boolean_style
    )
  end

  protected

  def build_nested_boolean_style_item_tag(collection_builder)
    # byebug
    tag = String.new
    tag << collection_builder.label(class: 'btn btn-cc') { "#{collection_builder.check_box} #{collection_builder.text}".html_safe }

    return tag.html_safe
  end

end

# _form.html.erb
<%= form.input 'test', collection: 1..5, as: :bootstrap_check_box_button_group %>

产量：

<div class="form-group bootstrap_check_box_button_group optional test_test">
    <label class="bootstrap_check_box_button_group optional control-label">Test</label>
    <div class="btn-group add-data-toggle clearfix">
        <label for="test_test_1">
            <label class="btn btn-cc" for="test_test_1">
                <input class="bootstrap_check_box_button_group optional" type="checkbox" value="1" checked="checked" name="test[test][]" id="test_test_1"> 1</label>
        </label>
        <label for="test_test_2">
            <label class="btn btn-cc" for="test_test_2">
                <input class="bootstrap_check_box_button_group optional" type="checkbox" value="2" name="test[test][]" id="test_test_2"> 2</label>
        </label>
        <label for="test_test_3">
            <label class="btn btn-cc" for="test_test_3">
                <input class="bootstrap_check_box_button_group optional" type="checkbox" value="3" name="test[test][]" id="test_test_3"> 3</label>
        </label>
        <label for="test_test_4">
            <label class="btn btn-cc" for="test_test_4">
                <input class="bootstrap_check_box_button_group optional" type="checkbox" value="4" name="test[test][]" id="test_test_4"> 4</label>
        </label>
        <label for="test_test_5">
            <label class="btn btn-cc" for="test_test_5">
                <input class="bootstrap_check_box_button_group optional" type="checkbox" value="5" name="test[test][]" id="test_test_5"> 5</label>
        </label>
        <input type="hidden" name="test[test][]" value="">
    </div>
</div>

预期：

<div class="form-group bootstrap_check_box_button_group optional test_test">
    <label class="bootstrap_check_box_button_group optional control-label">Test</label>
    <div class="btn-group add-data-toggle clearfix">
        <label class="btn btn-cc" for="test_test_1">
            <input class="bootstrap_check_box_button_group optional" type="checkbox" value="1" checked="checked" name="test[test][]" id="test_test_1"> 1
        </label>
        <label class="btn btn-cc" for="test_test_2">
            <input class="bootstrap_check_box_button_group optional" type="checkbox" value="2" checked="checked" name="test[test][]" id="test_test_2"> 2
        </label>
        <label class="btn btn-cc" for="test_test_3">
            <input class="bootstrap_check_box_button_group optional" type="checkbox" value="3" checked="checked" name="test[test][]" id="test_test_3"> 3
        </label>
        <label class="btn btn-cc" for="test_test_4">
            <input class="bootstrap_check_box_button_group optional" type="checkbox" value="4" checked="checked" name="test[test][]" id="test_test_4"> 4
        </label>
        <label class="btn btn-cc" for="test_test_5">
            <input class="bootstrap_check_box_button_group optional" type="checkbox" value="5" checked="checked" name="test[test][]" id="test_test_5"> 5
        </label>
        <input type="hidden" name="test[test][]" value="">
    </div>
</div>

Answer 1

Mb 这个可以帮助你或者只是使用下拉列表 https://gist.github.com/chunlea/11125126/