javascript - 如何在 edit.html.erb 中显示复选框 'checked state'

Question

我的 Rails 应用程序中有复选框。在填写表单时，复选框在被选中时颜色会变为蓝色。提交表单并且用户尝试编辑/更新表单后，复选框“选中的颜色(蓝色)”即使被选中也不会显示。这使得用户很难更新或编辑复选框。

我想要的是让用户在 edit.html.erb 中看到最初创建表单/记录时选择的复选框的选中(蓝色)状态。 这是我在 new.html.erb 中的复选框代码示例

<% Perk.all.each do |perk| %>
  <input type="checkbox", class="hidden" value="<%= perk.id %>" 
  name="company[perk_ids][]" id="company_perk_ids_<%= perk.id %>"/>
  <label class="category-choice" for="company_perk_ids_<%= perk.id %>">
<% end %>

这是我的js文件

    $(document).ready(function(){
      $(".category-choice").click(function(){
        $(this).toggleClass("active");
      });
    });

在我的CSS中，我有

 .category-choice {
  background: #CFCFD3;
  padding: 27px 15px 24px 10px;

  &.active {
    background: #51ADCF;
  }
}

在我的 edit.html.erb 中，复选框的示例代码与 new.html.erb 中的相同

<% Perk.all.each do |perk| %>
 <input type="checkbox", class="hidden" value="<%= perk.id %>" 
 name="company[perk_ids][]" id="company_perk_ids_<%= perk.id %>"/>
 <label class="category-choice" for="company_perk_ids_<%= perk.id %>">
<% end %>

Answer 1

听起来像是 TurboLinks 问题。将您的 JS 更改为此工作吗？

(function() {
  $(document).on("turbolinks:load", function() {
    $(".category-choice").click(function(){
      $(this).toggleClass("active");
    });
  });
}).call(this);