如何在不丢失现有值的情况下编辑复选框

I am building a job app with rails. In creating a new company, a user has the ability to select perks associated with the company in the "Company new page" through checkboxes. Ths works well until a user tries to update/edit the perks associated with a company.

我正在使用rails构建一个job app。在创建新公司时,用户可以通过复选框在“公司新页面”中选择与公司关联的福利。在用户尝试更新/编辑与公司关联的特权之前,这很有效。

When a user tries to edit the perks, the edit method completely removes existing values even though the user did not uncheck them in the edit page. So for example, a company has perks such as pension and free lunch. The user decides to edit this and add health insurance to the already existing perks. The edit method in this instance deletes pension and free lunch and only save health insurance despite the user not unchecking pension and free lunch. What i want is for he edit/update method to save the new checked values in addition to the already existing ones provided they were not unchecked. Below is a sample code in the edit page

当用户尝试编辑权限时,即使用户未在编辑页面中取消选中它们,编辑方法也会完全删除现有值。因此,例如,公司有养老金和免费午餐等津贴。用户决定编辑此内容并将健康保险添加到现有的特权中。在这种情况下,编辑方法删除了养老金和免费午餐,只保存健康保险,尽管用户没有取消退休金和免费午餐。我想要的是编辑/更新方法以保存新已检查的值以及已存在的值,前提是它们未被取消选中。以下是编辑页面中的示例代码

<% 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 <%= "active" if 
  @company.perk_ids.include? perk.id %>" for="company_perk_ids_<%= 
  perk.id %>">
   <% perk.name %>
  </label
<% end %>

This is the sample code in my companies controller

这是我公司控制器中的示例代码

  def edit
    @company = Company.find(params[:id])
  end

  def update
    edit
    @company.update(company_params)
    if @company.update(company_params)
      flash[:notice] = "Company profile successfully updated."
      redirect_to @company
    else
      render :edit
    end
  end

And in my js, I have

在我的js中,我有

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

1 个解决方案

#1

Seems like you're probably hiding the actual checkboxes and instead displaying an image based on the active class on the label to show its current state. The problem with that is that the active class isn't correctly indicating the checked state of the box (because you're not actually setting the box to checked when a category is already selected). To fix this you need to do something like

好像你可能隐藏了实际的复选框,而是根据标签上的活动类显示图像以显示其当前状态。问题在于活动类没有正确指示框的已检查状态(因为在选择类别时,实际上并未设置要检查的框)。要解决此问题,您需要执行类似的操作

<input type="checkbox" class="hidden" value="<%= perk.id %>" name="company[perk_ids][]" id="company_perk_ids_<%= perk.id %>" <%= "checked" if @company.perk_ids.include? perk.id %> />

This would have been immediately obvious if rather than basing your CSS on the 'active' class you based it on the state of the checkbox with CSS like

如果不是基于CSS的复选框状态将“CSS”置于“活动”类上而不是基于CSS,那么这将是显而易见的。

input[type="checkbox"]:checked + label { ... } # style for your checked box label

and then you wouldn't need the JS either since clicking on the label toggles the checkbox.

然后你不需要JS,因为点击标签切换复选框。

#1

<input type="checkbox" class="hidden" value="<%= perk.id %>" name="company[perk_ids][]" id="company_perk_ids_<%= perk.id %>" <%= "checked" if @company.perk_ids.include? perk.id %> />