Angular中点击select下拉框禁用option触发alert提示不生效问题求助

你现有代码存在两处核心错误：

• 事件绑定逻辑错误：原生禁用的<option>本身不会响应click事件，且你将事件绑定在了<select>根节点上，触发时机是点击整个下拉框时触发，无法精准捕获你点击的具体选项。
• 属性判断逻辑错误：this.plannedRouteForm.get("vehicle_index").value 拿到的是当前选中项的value值（即你绑定的索引i或者空字符串），不是option的DOM对象，本身不存在disabled属性，你的判断条件永远为false，自然不会弹出alert。

通过监听mousedown事件（该事件会先于click触发，且禁用元素的mousedown事件会冒泡到父级select）捕获点击目标，判断是否为禁用选项即可实现需求：

1. 修改component.html中select的事件绑定，传入事件对象：

<div class="col-lg-6 col-md-6">
  <div class="from-group">
    <label for="vehicle"> Vehicle </label>
    <select
      type="text"
      class="form-control"
      formControlName="vehicle_index"
      (mousedown)="showAlert($event)"
    >
     <option value="">--Select a Vehicle--</option>
      <option
        *ngFor="let vehicle of vehicles; let i = index"
        value="{{ i }}"
        [disabled]="vehicle.id == 8"
      >
         {{vehicle.model}} - {{vehicle.plate_number}}
      </option>
    </select>
  </div>
</div>

2. 修改component.ts中的showAlert方法：

showAlert(e: MouseEvent){
  const clickTarget = e.target as HTMLOptionElement;
  if (clickTarget.tagName === 'OPTION' && clickTarget.disabled) {
    alert("该选项不可选");
    // 阻止默认行为，避免下拉框自动收起
    e.preventDefault();
  }
}

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