Question

我在我当前的rails应用程序中使用simple form simple_form (v: 3.2.1)和bootstrap（其他开发人员以前参与过这个项目）。要从collection创建单选按钮，我使用

 = f.input :default_ship,
          label: 'foo)',
          collection: default_ship_options(@company),
          as: :radio_buttons

生成html，如

<span class="radio radio radio"><label for="foo"><input class="radio_buttons required" required="required" aria-required="true" type="radio" value="company" name="purchasing_source[default_ship]" id="foo"><span></span>Test Shipping Address</label></span>

在这里看一下，创建了一个实际用于显示复选框的空范围<span></span>。

我的CSS代码：

    .radio, .checkbox {
position: relative;
display: block;
margin-top: 10px;
margin-bottom: 10px;
}

.radio label, .checkbox label {
min-height: 20px;
padding-left: 20px;
margin-bottom: 0;
font-weight: normal;
cursor: pointer;
}

label input[type=checkbox], label input[type=radio] {
display: none;
}

label input[type=checkbox] + span, label input[type=radio] + span {
display: inline-block;
width: 1.4em;
height: 1.4em;
margin-right: 0.5em;
vertical-align: middle;
cursor: pointer;
border: 1px solid #AAA;
}

现在我的问题是简单的表单不会为span元素创建额外的checkbox，这就是为什么没有复选框显示复选框的原因。生成的Html复选框是

<span class="checkbox"><label for="manufacturer_currencies_fr"><input class="check_boxes optional" type="checkbox" value="fr" name="manufacturer[currencies][]" id="manufacturer_currencies_fr">Euro</label></span>

如何为复选框生成额外的span？（我不想改变我的CSS，因为它已经使用了很多地方）

在我看来，我必须在simple_form_bootstrap.rb做一些事但不确定。它也可能是以前的开发人员可能会覆盖某些方法，但我不知道在哪里可以找到它。

Answer 1

以下是包装check_boxes的示例。它们的处理方式相同，因此您可以使用＆＃39;选项＆＃39;用key＆＃34; collection_wrapper_tag＆＃34;传递必要数据的参数。你可以进入课堂＆＃34; form_builder＆＃34; simple_form并自己找到它。

= f.collection_check_boxes :tariffs, @form.tariffs, :first, :last, {checked: @form.selected_tariffs, collection_wrapper_tag: 'span'}

Answer 2

我发现的最佳解决方案是在简单形式的BooleanInput上覆盖label_input方法。

在app / inputs / boolean_input.rb中添加boolean_input文件：

class BooleanInput < SimpleForm::Inputs::BooleanInput

  def label_input(wrapper_options = nil)
    if options[:label] == false || inline_label?
      input(wrapper_options)
    elsif nested_boolean_style?
      html_options = label_html_options.dup
      html_options[:class] ||= []
      html_options[:class].push(boolean_label_class) if boolean_label_class

      merged_input_options = merge_wrapper_options(input_html_options, wrapper_options)

      build_hidden_field_for_checkbox +
          @builder.label(label_target, html_options) {
            template.content_tag( :div, class: 'switch-checkbox') {
                build_check_box_without_hidden_field(merged_input_options) +
                content_tag(:span, '', class:'slider round')
            } + label_text
          }
    else
      input(wrapper_options) + label(wrapper_options)
    end
  end


end

请注意，我只添加了sibbling span，以防标签不是内联的并且使用了nested_boolean_style？ =真。该方法中的大多数代码都是以简单形式从原始文件中复制粘贴的。

simple_form复选框不会为复选框生成兄弟跨度

2 个答案: