simple_form_for rails 单选按钮内联

Posted 2023-03-06

【中文标题】simple_form_for rails 单选按钮内联

【英文标题】：simple_form_for rails radio button inline

【发布时间】：2012-04-16 15:18:45

【问题描述】：

我正在尝试让我的按钮显示内联并且还具有默认值，因为它不能为空。我正在使用 plataformatex/simple_form 和 bootstrap。

= f.collection_radio_buttons :is_private, [[true, 'Private'], [false, 'Public']], :first, :last, style: "display:inline", default: true

它正在渲染这个：

<span>
  <input id="workout_is_private_true" name="workout[is_private]" type="radio" value="true" />
  <label class="collection_radio_buttons" for="workout_is_private_true">Private</label>    
</span>
<span>
  <input id="workout_is_private_false" name="workout[is_private]" type="radio" value="false" />
  <label class="collection_radio_buttons" for="workout_is_private_false">Public</label>
</span>

很明显style: 无法正常工作，但我不确定什么会起作用。

根据我添加的另一个建议

.radio_buttons  display:inline; 

= f.collection_radio_buttons :is_private, [[true, 'Private'], [false, 'Public']], :first, :last, :item_wrapper_class => 'radio_buttons', :default => true

得到：

<span class="radio_buttons">
  <input id="workout_is_private_true" name="workout[is_private]" type="radio" value="true" />
  <label class="collection_radio_buttons" for="workout_is_private_true">Private</label>
</span>
<span class="radio_buttons">
  <input id="workout_is_private_false" name="workout[is_private]" type="radio" value="false" />
  <label class="collection_radio_buttons" for="workout_is_private_false">Public</label>
</span>

请注意，默认值仍然无效。

【参考方案1】：

你可以试试

f.collection_radio_buttons :options, [[true, 'Yes'] ,[false, 'No']], :first, :last ,:style =>"display:inline", :default => true

不太确定您将哪个 gem 用于简单形式，但这是您可以尝试的源或参考

collection_radio_buttons(object, method, collection, value_method, text_method, options = , html_options = , &block)

【讨论】：

我用:style =>"display:inline", :default => true 试过了，但没用。我也试过:html_options => :style => "display:inline" 没有结果。它甚至没有显示在源代码中。

我遇到了同样的问题trev9065。你找到解决办法了吗？

【参考方案2】：

如果您希望它们内联，则需要通过执行以下操作为标签提供内联类：:item_wrapper_class => 'inline'

这是使用您的代码的示例：

= f.input :is_private, 
          :collection => [[true, 'Private'], [false, 'Public']], 
          :label_method => :last, 
          :value_method => :first,
          :as => :radio_buttons, 
          :item_wrapper_class => 'inline',
          :checked => true

编辑：我刚刚意识到我的答案更具体到 simple_form + bootstrap，因为 bootstrap 在给标签的内联类时已经定义了样式。不过，您应该可以使用我的示例，在创建自定义 css 时需要做更多工作。

【讨论】：

@trev9065 我使用您的代码在我的答案中添加了一个示例，您可以尝试一下，看看它是否有效？

感谢工作！您是否知道如何默认选择其中之一？

如果你这样做 :checked => true，那么当你更新它时它永远是 true，即使它被设置为 false

@Said 我不确定如何在 simple_form 的可用选项中完成，但对属性进行简单的三元检查 nil 将起作用：:checked => (@object.is_private.nil? ? true : @object.is_private)。如果@object 的is_private 属性值为nil，则true 是默认值，否则直接使用该属性的值。

感谢您指出 item_wrapper_class - 在自述文件中没有看到任何内容，但正是我需要的！

【参考方案3】：

上面的答案可能不起作用，因为我没有使用 Bootstrap。但还有其他方法。我在按钮周围拍了一个带有 class="radio-buttons" 的 div 并手动标记。然后我将它添加到我的样式表（SASS）中：

.radio-buttons 
  margin: .5em 0;
  span input 
    float: left;
    margin-right: .25em;
    margin-top: -.25em;
  
  #this grabs the MAIN label only for my radio buttons 
  #since the data type for the table column is string--yours may be different
  label.string  
    margin-bottom: .5em !important;
  

  clear: both;


.form-block 
  clear: both;
  margin-top: .5em;


 .radio-buttons span 
  clear: both;
  display:block;
 

这将使所有框架上的单选按钮内联，尽管这已被调整为最适合 Zurb Foundation。 ;)

【参考方案4】：

在 Bootstrap 3 中使用 Simple Form，您可以使用 radio 类以及 item_wrapper_class 和 item_wrapper_tag 选项。

= f.collection_radio_buttons :sort, [[foo,bar],[foo,bar],
  :first, :last,
  item_wrapper_class: :radio,
  item_wrapper_tag: :div

【参考方案5】：

一个简单的解决方案：

向项目包装器添加一个类。这个类可以是你选择的任何东西。我在下面的示例中使用“内联”：

form.input :my_field, as: 'radio_buttons' wrapper_html: class: 'inline'

然后定义一些仅适用于单选按钮组的 CSS（并且仅适用于实际的单选按钮，而不是项目标签）：

input.radio_buttons.inline label.radio
  display: inline-block;

下面是一个例子：

【讨论】：

也许它已被删除，但使用 as: 'radio' 会给我一个 No input found for radio 错误。

啊，我相信是“radio_buttons”。更新了我的答案，让我们知道这是否有效。很抱歉造成混乱。

【参考方案6】：

只为那些使用简单表单复选框的人来这里：

超薄视图：

= f.input :company_stages, as: :check_boxes, required: true

scss:

// simple-form checbox
.checkbox 
    margin-right: 20px;
    display: inline-block;