991px以下视口单选按钮选中隐藏div内同组选项问题求助

问题本质 #

HTML单选按钮的互斥逻辑仅和name属性绑定，与元素是否通过CSS隐藏无关。只要多个单选按钮name属性相同，无论是否设置display: none，都会被识别为同一组，选中一个就会取消同组其他所有单选按钮的选中状态，哪怕其他元素处于隐藏状态。

解决方案 #

按改造成本和合理性优先级排序如下：

• 方案1（最优，从根源规避问题）：放弃三套重复表单的实现逻辑，仅保留一套单选表单，通过媒体查询调整不同视口下的表单样式即可，没有重复的同名单选按钮自然不会产生冲突。
• 方案2（适配现有代码改动最小）：给隐藏区域的所有单选按钮加上disabled属性，被禁用的表单元素不会参与单选互斥，也不会在表单提交时被发送。
  可通过如下JS实现自动处理，监听窗口尺寸变化，仅给当前显示的视口区域的表单元素取消禁用，隐藏区域的全部禁用：

function handleFormAdapt() {
  const width = window.innerWidth;
  // 选中三个视口对应的表单容器
  const over992 = document.querySelector('.product-over-992px');
  const under991 = document.querySelector('.product-under-991px');
  const under768 = document.querySelector('.product-under-768px');

  function toggleContainerDisable(container, isDisable) {
    const allRadios = container.querySelectorAll('input[type="radio"]');
    allRadios.forEach(radio => radio.disabled = isDisable);
  }

  if (width >= 992) {
    toggleContainerDisable(over992, false);
    toggleContainerDisable(under991, true);
    toggleContainerDisable(under768, true);
  } else if (width >=768 && width <=991) {
    toggleContainerDisable(over992, true);
    toggleContainerDisable(under991, false);
    toggleContainerDisable(under768, true);
  } else {
    toggleContainerDisable(over992, true);
    toggleContainerDisable(under991, true);
    toggleContainerDisable(under768, false);
  }
}

// 页面加载完成后执行一次
window.addEventListener('load', handleFormAdapt);
// 窗口尺寸变化时触发更新
window.addEventListener('resize', handleFormAdapt);

• 方案3：给不同视口下的同功能单选按钮设置不同的name属性，后端接收参数时根据不同name做兼容处理即可，也能规避同组互斥问题。

另外你的现有CSS存在冗余属性，display: none已经可以完全隐藏元素且不占据布局空间，额外加的visibility: hidden和content-visibility: hidden可以直接删除。

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