simple_form自定义inline_checkbox标记

Question

我正在尝试更改label_input的标记.

这一行(来自simple_form_bootstrap.rb,包装器inline_checkbox)

  ba.use :label_input, :wrap_with => { :class => 'checkbox inline' }

和来自我的模板的电话:

= f.input :my_checkbox, as: :boolean, wrapper: :inline_checkbox, label: false, inline_label: "My label"

我得到以下标记:

<div class="control-group boolean optional my_checkbox">
  <div class="controls">
    <div class="checkbox inline">
      <input name="application[my_checkbox]" type="hidden" value="0">
      <label class="checkbox">
        <input class="boolean optional" id="my_checkbox" name="application[my_checkbox]" type="checkbox" value="1">
        My label
      </label>
    </div>
  </div>
</div>

我没有让复选框输入标签的子项,而是希望复选框输入同一div的兄弟,其类为"checkbox inline",如下所示:

<div class="control-group boolean optional my_checkbox">
  <div class="controls">
    <div class="checkbox inline">
      <input name="application[my_checkbox]" type="hidden" value="0">
      <input class="boolean optional" id="my_checkbox" name="application[my_checkbox]" type="checkbox" value="1">

      <label class="checkbox">
        My label
      </label>
    </div>
  </div>
</div>

使用自定义包装器,我可以稍微更改标记,但是:label_input始终将输入放在标签内.我该如何改变这种行为？理想情况下,我有一个不使用label_input的新包装器,而是使用:label和:input_field,但我没有成功.

Answer 1

简单表单有两种方法可以使用标签呈现复选框/单选按钮.它们在初始化文件中定义:

File: config/initializers/simple_form.rb

# Define the way to render check boxes / radio buttons with labels.
# Defaults to :nested for bootstrap config.
#   :inline => input + label
#   :nested => label > input
# config.boolean_style = :nested
config.boolean_style = :inline

您想要的是将其更改为:inline而不是:nested使Simple Form仅在输入上呈现没有标签包装的输入.见SimpleForm::Inputs::BooleanInput#input.

使用上述更改修改初始化程序文件,然后重新启动rails服务器以使此更改生效.使用输入如下:

= f.input :my_checkbox, as: :boolean, wrapper: :inline_checkbox, label: "My label"

以下是实现类似的不需要上述配置更改的另一种方法.我添加了一个包含div的包装div checkbox inline来包装复选框输入和标签:

= f.input :my_checkbox do
  = content_tag :div, class: 'checkbox inline' do
    = f.check_box :my_checkbox
    = f.label :my_checkbox