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的兄弟，同时使用类＆＃34;复选框内联＆＃ 34;，像这样：

<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，以便简单表单只渲染输入时没有标签包装的输入。请参阅SimpleForm::Inputs::BooleanInput#input。

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

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

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

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

Answer 2

<%=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]%>来获取当前嵌套字段数nad正确连接标签的复选框

Answer 3

尝试使用label_html选项。添加到输入“，label_html：{class：”复选框“}”

simple_form自定义inline_checkbox标记

3 个答案: