Simple_form:删除带有标签的内联复选框的外部标签

时间:2012-08-24 17:25:06

标签: ruby ruby-on-rails-3 simple-form

使用Simple_form 2.0.2

使用HAML的简单表单代码:

= f.input :remember_me, as: :boolean, inline_label: 'Remember me'

但它提出了这个:

<div class="control-group boolean optional">
  <label class="boolean optional control-label" for="admin_remember_me">Remember me</label>
  <div class="controls">
    <input name="admin[remember_me]" type="hidden" value="0" />
    <label class="checkbox"><input class="boolean optional" id="admin_remember_me" name="admin[remember_me]" type="checkbox" value="1" />Remember me</label>
  </div>
</div>

如何删除渲染的第一个标签,以便我只有内联标签?

6 个答案:

答案 0 :(得分:78)

您可以使用:

= f.input :remember_me, as: :boolean, inline_label: 'Remember me', label: false

答案 1 :(得分:24)

经过大量Google富有创建解决方案。

使用input_field代替不会自动生成标签的input

= f.input_field :remember_me, as: :boolean, inline_label: 'Remember me'

答案 2 :(得分:11)

对谁不起作用

  

= f.input_field ...

使用这种方式

  

= f.check_box ...

答案 3 :(得分:7)

使用simple_form 2.1.0和rails 3.0.20,这里列出的解决方案都没有用(我不想使用f.input_field,因为这是对失败的承认)。

缺少的部分是 boolean_style 选项:

options.merge!({label: false, boolean_style: :inline})

我建议你为此创建一个自定义输入(例如:inline_checkbox)

boolean_style配置为:默认嵌套,我认为:

# Defaults to :nested for bootstrap config.
#   :inline => input + label
#   :nested => label > input
config.boolean_style = :nested

答案 4 :(得分:0)

.control-group.error .help-inline {
  display: none;
}

这应该可行,它适用于rails 3.2和simple_form 2.x +

答案 5 :(得分:0)

可能为时已晚,但受到gamov回答的启发我在初始化文件' config / simple_form_bootstrap.rb '中使用内联引导复选框创建了这个自定义包装器:

config.wrappers :horizontal_radio_and_checkboxes, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
   b.use :html5
   b.optional :readonly

   b.use :label, class: 'col-sm-3 control-label'
   b.use :input
   b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
   b.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
 end

生成此html:

 <div class="form-group boolean optional user_admin">
    <label class="boolean optional col-sm-3 control-label" for="user_admin">Admin</label>
    <div class="col-sm-9 checkbox-inline">
    <input name="user[admin]" value="0" type="hidden">
    <input class="boolean optional" id="user_admin" name="user[admin]" value="1" type="checkbox">
  </div>