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>

我不想让复选框输入 label 的 child，而是希望复选框输入同一个 [=48] 的同级=] 与 class "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

尝试使用 label_html 选项。添加到输入 ", label_html: {class: "checkbox"} "

Answer 2

简单的表单有几种方法来呈现带有标签的复选框/单选按钮。它们在初始化文件中定义：

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，以便简单表单仅呈现输入而没有输入上的标签包装器。参见 SimpleForm::Inputs::BooleanInput#input。

使用上述更改修改初始化文件并重新启动您的 rails 服务器以使此更改生效。使用输入如下：

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

以下是另一种无需更改上述配置即可实现类似功能的方法。我添加了一个包装器 div 和 checkbox inline 类来包装复选框输入和标签：

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

Answer 3

<%=nested_f.input_field :search_team, id: "#{nested_f.options[:child_index]}"%>
<label class="checked_search" for="<%=nested_f.options[:child_index]%>"><span></span> </label>

它将生成

<input name="user[users_sport_types_attributes][0][search_team]"      type="hidden" value="0">
<label class="checkbox">
  <input checked="checked" class="boolean optional" id="#{nested_f.options[:child_index]" name="user[users_sport_types_attributes][0][search_team]" type="checkbox" value="1">
</label>

 <label class="checked_search" for="c1">
   <span></span>
 </label>

您可以设置 boolean_style: :inline 选项以在没有包装器的情况下获取输入。不要忘记使用 input_field 而不是 input 简单形式方法。

<%=nested_f.input_field :search_team, boolean_style: :inline, id: "#{nested_f.options[:child_index]}"%>
<label class="checked_search" for="<%=nested_f.options[:child_index]%>"><span></span></label>

它将生成没有包装器和标签的代码

 <input name="user[users_sport_types_attributes][0][search_team]" type="hidden" value="0">
 <input checked="checked" class="boolean optional" id="c1" name="user[users_sport_types_attributes][0][search_team]" type="checkbox" value="1">
 <label class="checked_search" for="c1">
    <span></span>
 </label>

不要忘记使用 <%=nested_f.options[:child_index]%> 获取当前嵌套字段计数和复选框的正确连接标签

simple_form 自定义 inline_checkbox 标记

simple_form custom inline_checkbox markup

html

ruby

ruby-on-rails

simple-form