Rails HAML视图默认隐藏复选框及对应标签的实现方法

步骤1：给目标标签添加隐藏类 #

找到school.admin.current_status对应的label元素，给它加上和复选框一致的隐藏类（比如你当前用的hidden类），确保初始状态下标签和复选框都被隐藏：

%td
  %label{ for: "school_admin_current_status", class: "hidden" } 当前状态
  = check_box_tag "school_admin[current_status]", school.admin.current_status, school.admin.current_status, class: "hidden"
  %button.edit-btn 编辑

步骤2：添加编辑按钮的切换逻辑 #

通过JavaScript实现点击编辑按钮时，切换标签和复选框的显示状态：

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.edit-btn').forEach(btn => {
    btn.addEventListener('click', function() {
      const parentTd = this.closest('td');
      // 切换标签的隐藏状态
      parentTd.querySelector('label').classList.toggle('hidden');
      // 切换复选框的隐藏状态
      parentTd.querySelector('input[type="checkbox"]').classList.toggle('hidden');
      // 可选：切换按钮文本为“保存”/“编辑”
      this.textContent = this.textContent === '编辑' ? '保存' : '编辑';
    });
  });
});

步骤3：确保隐藏类的CSS生效 #

如果项目中没有现成的隐藏类，添加自定义CSS：

.hidden {
  display: none;
}

这样就能实现默认状态下标签与复选框一同隐藏，点击编辑按钮时同步显示的需求。

内容的提问来源于stack exchange，提问作者htamayo