Question

我的rails应用程序中有复选框。在填写表单时，复选框会在选中时将颜色更改为蓝色。提交表单并且用户尝试编辑/更新表单后，即使已选中复选框，也会显示“选中的颜色（蓝色）”复选框。这使得用户难以更新或编辑复选框。

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

TyFun

这是我的js文件

<% 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 %>

在我的CSS中，我有

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

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

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

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

Answer 1

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

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

Answer 2

在dom准备就绪时，您可以测试是否已选中该元素。因此，根据你可以.toggleClass(function, [state])。

摘录：

$("[id^='job_perk_ids_']").on('change', function (e) {
    $("[id^='job_perk_ids_']").not(this).removeAttr('checked');
    $('label[for!=' + this.id + ']').removeClass('active');
    var lbl = $('label[for=' + this.id + ']');
    var isChk = $(this).is(":checked");
    lbl.toggleClass(function(idx, className) {
        return "active";
    }, isChk);
});

// at dom ready
$(".category-choice").toggleClass(function(idx, className) {
    var inpt = '#' + $(this).attr('for');
    return $(inpt).is(":checked") ? "active" : "";
});

.category-choice {
    background: #cfcfd3;
    padding: 27px 15px 24px 10px;
}

.category-choice.active {
    background: #51adcf;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
    <input type="checkbox" class="hidden" value="perk.id" checked name="job[perk_ids][]"
           id="job_perk_ids_id0"/>
    <label class="category-choice" for="job_perk_ids_id0">my label0: checked</label>
    <input type="checkbox"  class="hidden" value="perk.id"  name="job[perk_ids][]"
           id="job_perk_ids_id1"/>
    <label class="category-choice" for="job_perk_ids_id1">my label1</label>
</form>

如何在edit.html.erb中显示复选框“已检查状态”

2 个答案: