将唯一 id 附加到 simple_form 生成的单选按钮输入，并将匹配值附加到关联标签

Posted 2023-03-05

【中文标题】将唯一 id 附加到 simple_form 生成的单选按钮输入，并将匹配值附加到关联标签

【英文标题】：Appending a unique id to simple_form generated radio button inputs and a matching value to the associated label

【发布时间】：2015-02-16 05:53:51

【问题描述】：

我有以下对象：

# 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。我打算将input 上的id 和下面label 上的for 更改为使用该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。 将label_html for 值与label_html: for: 'interest_condition' + interest.client_id.to_s 分配给单选按钮集合的父标签而不是单选按钮本身之后的标签分配for 值（这通过@ 启用987654339@)

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

<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 属性？

【参考方案1】：

我认为您正在这里寻找关联。试试这个：

f.association :client, label_method: :condition

并查看是否将_#id 附加到您的每个input#ids

只要你能做到：

Interest.first.client.condition

并得到期望值，我认为上面应该可以工作

【参考方案2】：

作为（我希望是）一个临时修复，我让页面加载然后我使用咖啡脚本更新所有 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 用户）。

【参考方案3】：

我遇到了一个案例，我需要为单选按钮集合中的每个单选选项设置唯一的 ID。

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

= 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 场景。