如何在所有子Input均为disabled时隐藏filter-form__group父容器

CSS没法实现「根据所有子元素的状态控制父元素显示」的逻辑（没有对应的父选择器或批量判断的伪类），所以必须用JavaScript来完成需求。

实现逻辑 #

• 选中所有.filter-form__group容器
• 逐个检查每个容器内的所有<input>是否都处于disabled状态
• 若全部满足disabled条件，就把该容器设为display: none

代码示例 #

// 定义检查并处理容器显示状态的函数
function handleDisabledFilterGroups() {
  // 获取所有目标容器
  const filterGroups = document.querySelectorAll('.filter-form__group');
  
  filterGroups.forEach(group => {
    // 拿到容器内所有input元素
    const inputs = group.querySelectorAll('input');
    // 判断所有input是否都处于disabled状态
    const allInputsDisabled = Array.from(inputs).every(input => input.disabled);
    
    // 根据判断结果设置容器显示
    group.style.display = allInputsDisabled ? 'none' : '';
  });
}

// 页面加载完成后执行一次初始检查
document.addEventListener('DOMContentLoaded', handleDisabledFilterGroups);

// 如果input的disabled状态会动态修改，添加监听实现实时更新
const mutationObserver = new MutationObserver(handleDisabledFilterGroups);
document.querySelectorAll('.filter-form__group').forEach(group => {
  mutationObserver.observe(group, {
    subtree: true,
    attributes: true,
    attributeFilter: ['disabled']
  });
});

代码说明 #

• DOMContentLoaded确保页面元素加载完毕后执行初始检查
• MutationObserver用于监听input元素的disabled属性变化，实现动态更新容器显示（如果你的场景里input状态是固定不变的，可以删掉这部分代码）
• Array.from(inputs).every(...)把获取到的input集合转为数组，用every方法判断所有元素是否满足disabled条件

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