form_for checkbox associated with label

I put a form with checkbox, submit button, and label in iteration block. And I wanted each label clickable.

<%= @tasks.each do |task| %>

  <%= form_for task, remote: true do |f| %>

    <%= f.check_box :complete %>
    <%= f.submit "update" %>
    <%= f.label :complete, task.name %>

  <% end %>

<% end %>

But clicking any label only ticked the first checkbox on the list.

First, for a clickable label in HTML, attribute name of label tag should match id name of input tag.

stackoverflow “How to create an HTML checkbox with a clickable label”

<label><input type="checkbox" name="checkbox" value="value">Text</label>

or should be

<input type="checkbox" name="checkbox" id="checkbox_id" value="value">
<label for="checkbox_id">Text</label>

Next, html.erb code above renders HTML with all the same id and for for each line.

<form accept-charset="UTF-8" action="/tasks/1" class="edit_task" data-remote="true" id="edit_task_1" method="post"><div style="display:none"><input name="utf8" type="hidden" value="✓"><input name="_method" type="hidden" value="patch"></div>

  <input name="task[complete]" type="hidden" value="0"><input checked="checked" id="task_complete" name="task[complete]" type="checkbox" value="1">  
  <label for="task_complete">Task Name</label>

</form>

So I tried to put task.id (which is given different for each task, each form) into the name of those tag attributes. I made input tag with value attribute on f.label helper.

  <%= f.label :complete, task.name, value: task.id %>

and it made HTML like,

<label for="task_complete_2">Task Name</label>

And I tried to do the same thing into <input id="task_complete"> (which was rendered by <%= f.check_box :complete %>). Somehow I figured this out:

<%= f.check_box :complete, id: "task_complete_#{task.id}" %>

And it made it like

<input checked="checked" id="task_complete_2" name="task[complete]" type="checkbox" value="1">

Now I have it as I wished. Clicking each label ticks same line checkbox. Yay!

 
7
Kudos
 
7
Kudos

Now read this

Git Merge your next Change

Sometimes when you want to merge changes made in another branch (in some remote) to your master branch. (or any branch supposed to be working) When you trust and it works fine for sure, then it would be quite simple: git merge And also... Continue →