Question

我有以下对象：

# Table name: interests
#
#  id         :integer          not null, primary key
#  client_id  :integer
#  condition  :string(255)
belongs_to :client

我使用以下表单创建新对象：

= simple_form_for interest do |f|
  = f.error_notification

  .form-inputs
    = f.hidden_field :client_id, value: interest.client_id
    = f.input :condition, as: :radio_buttons, collection: ['Used', 'New'], boolean_style: :inline

  .form-actions
    = f.button :submit

我在同一页面上多次渲染此表单，并且每个单选按钮输入的ID都与页面上每个表单中相同输入的ID相匹配。

这是在页面上多次呈现的内容：

<div class="input radio_buttons optional interest_condition">
  <label class="radio_buttons optional control-label">Condition</label>
  <span class="radio">
    <input class="radio_buttons optional" id="interest_condition_used" name="interest[condition]" type="radio" value="Used">
      <label class="collection_radio_buttons" for="interest_condition_used">Used</label>
    </input>
  </span>
  <span class="radio">
    <input class="radio_buttons optional" id="interest_condition_new" name="interest[condition]" type="radio" value="New">
      <label class="collection_radio_buttons" for="interest_condition_new">New</label>
    </input>
  </span>
</div>

我尝试过的解决方案：

每个表单都可以通过interest.client_id访问唯一ID。我打算将id上的input和以下for上的label更改为使用该ID的内容，以确保每个版本都是唯一的：

= f.input :condition, as: :radio_buttons, collection: ['Used', 'New'], 
    boolean_style: :inline, 
    input_html: { id: 'interest_condition' + interest.client_id.to_s}, 
    label_html: {for: 'interest_condition' + interest.client_id.to_s}

但这有两件事是错的：

我丢失了通常由集合生成的动态ID，每个id / for字面上都是interest_condition#{interest.client_id}而不是interest_condition_new#{interest.client_id}和interest_condition_used#{interest.client_id}。< / LI>
使用label_html分配for label_html: {for: 'interest_condition' + interest.client_id.to_s}值会为单选按钮集合的父标签分配for值，而不是收音机后面的标签按钮本身（使用boolean_style: :inline）

上述代码生成的代码示例：

<div class="input radio_buttons optional interest_condition">
  <label class="radio_buttons optional control-label" for="interest_condition7">
    Condition
  </label>
  <span class="radio">
    <input class="radio_buttons optional" id="interest_condition7" name="interest[condition]" type="radio" value="Used">
    <label class="collection_radio_buttons" for="interest_condition_used">
      Used
    </label>
  </span>
  <span class="radio">
    <input class="radio_buttons optional" id="interest_condition7" name="interest[condition]" type="radio" value="New">
    <label class="collection_radio_buttons" for="interest_condition_new">
      New
    </label>
  </span>
</div>

如何将页面上呈现的每个特定表单的自定义值附加到单选按钮的id和form属性？

Answer 1

我认为你在这里寻找一个协会。试试这个：

f.association :client, label_method: :condition

并查看是否将_#{id}添加到您的每个input#id

如果您可以这样做：

Interest.first.client.condition

并获得预期值，我认为以上应该有效

Answer 2

作为（我希望是）临时修复，我让页面加载，然后使用coffeescript更新所有input id属性和label for属性：

$ ->
  $('.ids-updated-by-js').each (index) ->
    $(this).find('span').each ->
      span = $(this)
      id = span.find('input').attr('id')
      span.find('input').attr('id', id + index)
      span.find('label').attr('for', id + index)
      console.log 'Updated radio button with id: ' + index + ' ' + id
    return

以上代码的Javascript版本：

$(function() {
  return $('.ids-updated-by-js').each(function(index) {
    $(this).find('span').each(function() {
      var id, span;
      span = $(this);
      id = span.find('input').attr('id');
      span.find('input').attr('id', id + index);
      span.find('label').attr('for', id + index);
      return console.log('Updated radio button with id: ' + index + ' ' + id);
    });
  });
});

这不是理想的，但它确实产生了预期的效果（只要项目不必支持noscript用户）。

Answer 3

我遇到一种情况，我需要为一组单选按钮中的每个单选选项使用唯一的ID。

我使用namespace选项而不是创建自定义输入并覆盖Simple Form的CollectionRadioButtonInput或使用Wrapper API创建自定义包装。

= f.input_field :my_field, as: :radio_buttons, namespace: "unique_prefix_to_be_prepended_to_id", boolean_style: :inline

名称空间将放在SimpleForm根据您的模型和字段名称生成的自动生成的ID之前。例如，假设我有一个用户的以下表单。

= simple_form_for @user do |f|
   = f.input_field :my_field, as: :radio_buttons, namespace: "unique"

“是”单选按钮选项的HTML <input>标记将自动具有unique_user_my_field_true的ID。 “否”单选按钮选项的ID为unique_user_my_field_false。当然，这是假设您仅对单选按钮使用是/否T / F方案。

为simple_form生成的单选按钮输入附加唯一ID，并为相关标签添加匹配值

3 个答案: