Adding a unique identifier to the nested simple_form radio input buttons and matching value with the corresponding label

Question

I have the following object:

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

I use the following form to create new objects:

= 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

I process this form several times on the same page, and I have a problem with the identifiers of each input of the switch corresponding to the identifier of the same input in each form on the page.

This is what is repeatedly displayed on the page:

<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>

My decision:

Each form has access to a unique identifier through interest.client_id. I intend to change idto inputand forto the next labelby something, using this identifier to ensure that each version is unique:

= 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}

But this does two things wrong:

• , , 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 , , ( 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 s

:

Interest.first.client.condition

, ,

Answer 2

( ) , , input id label for coffeescript:

$ ->
  $('.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).