Angular中禁用的optgroup内option点击仍触发事件的问题

这个问题其实是原生HTML的特性导致的：<optgroup>的disabled属性仅仅是让分组内的选项视觉上呈现禁用状态，并不会自动禁用里面的每个<option>元素，所以点击这些选项时，绑定的click事件依然会被触发。

下面给你两种靠谱的解决思路，推荐结合使用：

方案1：给Option添加Disabled绑定 #

直接给References分组里的每个<option>加上[disabled]绑定，和optgroup的禁用状态保持一致。这样原生的禁用选项会彻底阻止点击事件的触发，同时也符合表单控件的交互规范：

<select size="10" class="custom-select mr-4">
  <optgroup label="Properties">
    <option *ngFor="let eachVal of dataProps" (click)="getPropValues(eachVal)">
      {{eachVal.property}}
    </option>
  </optgroup>
  <optgroup label="References" [disabled]="propClicked">
    <option 
      *ngFor="let eachVal of objProps" 
      [disabled]="propClicked"  <!-- 新增这一行 -->
      (click)="getReferenceValues(eachVal)"
    >
      {{eachVal.property}}
    </option>
  </optgroup>
</select>

方案2：在事件处理函数中添加判断 #

如果出于某些原因不想禁用option，也可以在getReferenceValues方法里先检查禁用状态，一旦propClicked为true就直接返回，不执行后续逻辑：

getReferenceValues(eachVal: any) {
  // 先判断是否处于禁用状态，是则直接退出
  if (this.propClicked) {
    return;
  }
  
  // 原来的业务逻辑写在这里
  // ...
}

推荐做法 #

优先使用方案1，因为原生禁用的option不仅能阻止点击事件，还会让浏览器自动处理交互（比如无法通过键盘选中），用户体验更统一；同时搭配方案2做双重保险，避免极端情况下的逻辑触发。

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