近日在解票時，遇到一張關於 simple_form 表單問題的 ticket。
（註：該專案使用的 SimpleForm 是 v2.1.1 版本）

# 先聲明小弟是前端工程師，完全的 Rails 生手，有說明錯誤的地方請多多包涵哦 :$

情況是這樣子的，在這個專案裡，使用者個人資料的表單中有個這樣的欄位：

它是以群組核取框（checkboxes）呈現，使用者同時可以核取多個項目。

但奇怪的是，用 SimpleForm 產生的這個欄位，在點選「科技」、「網路」、「手機」的文字（label）時，預期行為應是「讓點選的 label 文字左方的核取框作用（勾選或取消勾選）」，但無論按哪個文字，都是第一項「科技」的核取框有反應而已。

這是因為產生的 HTML 語法有誤導致：

<div class="input check_boxes optional">
  <label class="check_boxes optional" for="user_profile_attributes_preferred_info">喜歡哪類資訊</label>
  <span>
    <input name="user[profile_attributes][preferred_info][]" type="hidden" value=">
    <input class="check_boxes optional" id="user_profile_attributes_preferred_info_" name="user[profile_attributes][preferred_info][]" type="checkbox" value="科技">
    <label class="collection_check_boxes" for="user_profile_attributes_preferred_info_">科技
    </label>
  </span>
  <span>
    <input name="user[profile_attributes][preferred_info][]" type="hidden" value=">
    <input class="check_boxes optional" id="user_profile_attributes_preferred_info_" name="user[profile_attributes][preferred_info][]" type="checkbox" value="網路">
    <label class="collection_check_boxes" for="user_profile_attributes_preferred_info_">網路
    </label>
  </span>
  <span>
    <input name="user[profile_attributes][preferred_info][]" type="hidden" value=">
    <input class="check_boxes optional" id="user_profile_attributes_preferred_info_" name="user[profile_attributes][preferred_info][]" type="checkbox" value="手機">
    <label class="collection_check_boxes" for="user_profile_attributes_preferred_info_">手機
    </label>
  </span>
</div>

不大正常，每個 input 的 id 以及 label 的 for 屬性值都一模一樣，當然選不到預期對應的項目囉。

Continue reading