ラジオボタンの入力の有効範囲をそのセンテンスまでとしたい

例えば、下記のラジオボンタン選択がある時、
2行目の「どちらかといえば良い」の部分をマウスでクリックしても、２番目のラジオボタンが選択できるようにしたい。
現在のコードは、下記のようである。

<div class="radio-inline">
　<%= f.radio_button :post14, value="メンバーのチームワーク：良い", checked: "checked" %>
  　<%= f.label :良い, class: "job_type_label" %>
  </div>
  <div class="radio-inline">
   <%= f.radio_button :post14, value="メンバーのチームワーク：どちらかといえば良い" %>
        <%= f.label :どちらかといえば良い, class: "job_type_label" %>
  </div>
  <div class="radio-inline">
   <%= f.radio_button :post14, value="メンバーのチームワーク：どちらかといえば悪い" %>
   <%= f.label :どちらかといえば悪い, class: "job_type_label" %>
  </div>
  <div class="radio-inline">
   <%= f.radio_button :post14, value="メンバーのチームワーク：悪い" %>
   <%= f.label :悪い, class: "job_type_label" %>
  </div>

よろしくご教授下さい。

行動規範の内容に同意します

回答1件

ベストアンサー

railsには詳しくないのですが
ラジオボタンをテキストで選択させるには

ラジオボタンと文字を一緒のlabelで囲う
ラジオボタンにつけたidをlabelにforで指定する

のどちらかになります

HTML
1<form>
2<div class="radio-inline">
3<label>
4<input type="radio" name="post14" value="メンバーのチームワーク：良い" checked>
5良い
6</label>
7</div>
8<div class="radio-inline">
9<label>
10<input type="radio" name="post14" value="メンバーのチームワーク：どちらかといえば良い">
11どちらかといえば良い
12</label>
13</div>
14<div class="radio-inline">
15<label>
16<input type="radio" name="post14" value="メンバーのチームワーク：どちらかといえば悪い">
17どちらかといえば悪い
18</label>
19</div>
20<div class="radio-inline">
21<label>
22<input type="radio" name="post14" value="メンバーのチームワーク：悪い">
23悪い
24</label>
25</div>
26</form>
27
28<form>
29<div class="radio-inline">
30<input type="radio" name="post14" value="メンバーのチームワーク：良い" id="teamwork_1" checked>
31<label for="teamwork_1">良い</label>
32</div>
33<div class="radio-inline">
34<input type="radio" name="post14" value="メンバーのチームワーク：どちらかといえば良い" id="teamwork_2">
35<label for="teamwork_2">どちらかといえば良い</label>
36</div>
37<div class="radio-inline">
38<input type="radio" name="post14" value="メンバーのチームワーク：どちらかといえば悪い" id="teamwork_3">
39<label for="teamwork_3">どちらかといえば悪い</label>
40</div>
41<div class="radio-inline">
42<input type="radio" name="post14" value="メンバーのチームワーク：悪い" id="teamwork_4">
43<label for="teamwork_4">悪い</label>
44</div>
45</form>
46
47