simple_form 复选框不会为复选框生成同级跨度答案

【问题标题】：simple_form checkbox does not generate sibling span for checkboxsimple_form 复选框不会为复选框生成同级跨度
【发布时间】：2024-05-04 21:45:03
【问题描述】：

我在我当前的 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;
}

现在我的问题是简单的表单不会为checkbox 元素创建额外的span，这就是为什么没有为复选框显示复选框的原因。为复选框生成的 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 做点什么，但不确定。也可能是以前的开发人员可能会覆盖某些方法，但我不知道在哪里可以找到。

【问题讨论】：

标签： ruby-on-rails twitter-bootstrap-3 simple-form

【解决方案1】：

这是包装复选框的示例。它们的处理方式相同，因此您可以使用“options”参数通过键“collection_wrapper_tag”传递必要的数据。可以进入simple_form的“form_builder”类自行查找。

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

【讨论】：

【解决方案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

请注意，我仅在标签未内联且带有nested_boolean_style 的情况下添加了兄弟跨度？ =真。该方法中的大部分代码都是从原始的简单形式复制粘贴的。

【讨论】：