Chrome升级至95.0版本后AngularJS中ng-model在多选下拉框失效问题

嘿，这问题我之前也碰到过类似的——Chrome升级到95.0版本后，表单控件的状态管理逻辑确实有不少调整，尤其是针对隐藏元素、复用组件的状态清理变得更严格了。结合你的描述，我来拆解下可能的原因和可行的修复方案：

核心原因分析 #

Chrome 95对表单元素（比如复选框）的状态重置机制做了优化，主要影响这几种场景：

• 你可能复用了同一批DOM复选框元素在不同实体间切换，新版本Chrome会主动重置非聚焦状态下的控件选中状态
• 旧实体的DOM元素被隐藏但未销毁时，Chrome的新垃圾回收/状态清理逻辑会自动清除选中状态
• change/click事件的触发时机在新版本中有细微变化，导致你的状态同步逻辑没有及时跟上

针对性修复方案 #

1. 用独立状态存储替代DOM原生状态 #

别依赖复选框的checked属性保存选中状态，而是用专门的对象/集合记录每个实体的选中项，切换实体时再同步到DOM：

// 存储不同实体的选中状态，键为实体ID，值为选中项的集合
const entitySelectionMap = {
  entityA: new Set(['item1', 'item3']),
  entityB: new Set()
};

// 切换实体时，根据存储的状态更新复选框
function switchToEntity(entityId) {
  document.querySelectorAll('.multi-select-checkbox').forEach(checkbox => {
    checkbox.checked = entitySelectionMap[entityId].has(checkbox.dataset.value);
  });
}

// 复选框变化时同步更新状态存储
function handleCheckboxChange(e) {
  const currentEntity = getCurrentActiveEntityId(); // 替换成你获取当前实体的逻辑
  const itemValue = e.target.dataset.value;
  if (e.target.checked) {
    entitySelectionMap[currentEntity].add(itemValue);
  } else {
    entitySelectionMap[currentEntity].delete(itemValue);
  }
}

2. 禁用Chrome自动表单状态重置 #

给复选框添加autocomplete="off"属性，阻止浏览器自动修改控件状态：

<input type="checkbox" class="multi-select-checkbox" data-value="item1" autocomplete="off">

3. 避免DOM元素复用导致的状态污染 #

如果你用了React/Vue这类框架，确保不同实体的多选控件列表有唯一的key属性，让框架不会复用DOM元素：

// React示例：给每个实体的多选容器加唯一key
{entities.map(entity => (
  <div key={`entity-group-${entity.id}`}>
    {entity.items.map(item => (
      <label key={`item-${item.id}`}>
        <input
          type="checkbox"
          checked={entitySelectionMap[entity.id].has(item.id)}
          onChange={() => handleToggle(entity.id, item.id)}
          autocomplete="off"
        />
        {item.name}
      </label>
    ))}
  </div>
))}

4. 检查事件委托的兼容性 #

Chrome 95对事件冒泡的处理有细微调整，确保你的事件监听是绑定在固定的父元素上，而不是随实体切换的动态元素：

// 正确的事件委托写法，绑定到固定的父容器
document.getElementById('multi-select-container').addEventListener('change', (e) => {
  if (e.target.classList.contains('multi-select-checkbox')) {
    handleCheckboxChange(e);
  }
});

验证小技巧 #

1. 打开Chrome开发者工具的「Console」，切换实体前后打印entitySelectionMap的内容，确认状态是否正确保存
2. 在「Elements」面板中查看复选框的checked属性，对比和状态存储的值是否一致

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