[Rails] 修正 simple_form 2.1 中 input value 使用英文之外的多語系字元,導致無法正常產生 label for, input id 對應的錯誤

Standard

近日在解票時,遇到一張關於 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