Chrome更新后Angular动态fieldset点击单选框无法启用问题求助

问题场景 #

Chrome升级后，通过两层*ngFor动态生成的嵌套div中的fieldset，初始仅fieldset 0处于启用状态。点击fieldset标题可正常启用对应区块，但点击fieldset内的单选框无法触发启用操作，该问题仅出现在最新版Chrome，其他浏览器表现正常。

原因分析 #

最新版Chrome对disabled状态下的fieldset交互逻辑进行了调整：当fieldset处于禁用状态时，浏览器会直接拦截内部所有表单元素的点击事件，导致Angular绑定的启用方法无法被触发。

可行解决办法 #

• 替代fieldset禁用方式：
  不直接给fieldset设置disabled属性，改用CSS模拟禁用视觉效果，同时单独控制内部表单元素的禁用状态：

  .fieldset-disabled {
    opacity: 0.6;
    pointer-events: none;
  }
  

  在模板中根据状态切换这个类，并单独绑定单选框的disabled属性。

• 强制触发事件：
  保留fieldset的disabled属性，给单选框添加点击事件手动调用启用逻辑，同时阻止事件冒泡避免浏览器拦截：

  <input type="radio" (click)="enableFieldset(itemIndex); $event.stopPropagation()">
  

• 简化DOM层级：
  减少*ngFor的嵌套层数，优化动态生成的DOM结构，避免Chrome对深层嵌套动态元素的事件处理异常。

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