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

Posted 2023-05-09

【中文标题】如何在edit.html.erb中显示复选框“选中状态”

【英文标题】：How to show checkbox 'checked state' in edit.html.erb

【发布时间】：2018-09-24 15:48:39

【问题描述】：

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

【参考方案1】：

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

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

【参考方案2】：

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

sn-p：

$("[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>

【讨论】：

解决方案不起作用。当我将选中的复选框添加到复选框的“名称”时，它会选中所有复选框。这不是我想要的。我只希望选中的项目受“.active”影响

我认为你没有完全理解我的问题，所以我决定更新它

@HakeemBaba 提交表单后，我假设一个新页面会被发回。在此页面上，您可以将选中元素的颜色设置为活动状态。活动类可以包含蓝色。很抱歉，但我无法理解流程：客户端 --> 服务器 --> 客户端。

yhh，所以我想知道如何在编辑页面上将选中元素的颜色设置为“活动”？

@HakeemBaba 为了处理 on the edit page 事件足以将我的更改事件侦听器替换为您的。在这种情况下，我对您的 在编辑页面 事件一无所知。