<optgroup> 支持原生 disabled 属性，直接写 disabled 即可；浏览器置灰其下 <option> 且不可选，但已选中的值不会自动清除，JS 赋值或 selected 属性仍可能绕过限制。

HTML <optgroup> 的 disabled 属性写法

<optgroup> 支持原生 disabled 属性，直接写 disabled 即可，不需要赋值（即不写 disabled="true" 或 disabled="disabled"）。

浏览器会将该分组下的所有 <option> 置灰且不可选，但注意：父级 <select> 本身仍可聚焦，且已选中的值若属于被禁用分组，**不会自动清除**（这是常见误解点）。

为什么加了 disabled 却还能选中里面的

<option></H3>
<p>只有当 <code><option>

所在的 <optgroup disabled> 已存在、且该 <option> 没有单独设置 disabled，才受控。但以下情况会绕过限制：

• <select> 初始化时已有 value 对应禁用分组里的某个 <option> —— 浏览器允许保留该选中态，只是后续无法再通过交互选中它
• JavaScript 动态设置 select.value = "xxx"，且 "xxx" 是禁用分组内 <option> 的 value —— 大多数浏览器仍会接受，UI 不更新（看起来“失效”）
• 使用 selected 属性硬编码在禁用分组的 <option> 上 —— 属性优先级高于 <optgroup disabled>，部分浏览器可能仍显示为选中

<optgroup disabled> 在不同浏览器中的表现差异

主流浏览器（Chrome/Firefox/Safari/Edge）对 <optgroup disabled> 的支持一致，但细节有差别：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

立即学习“前端免费学习笔记（深入）”；

• Firefox 和 Safari 会完全隐藏禁用分组的下拉展开箭头（即点击后不展开该分组）
• Chrome 和 Edge 仍显示分组标题，但文字置灰、无 hover 效果，且内部 <option> 不可点击
• 所有浏览器都不阻止通过键盘上下键导航到禁用分组的 <option>，但按回车/空格无效 —— 这容易让辅助技术用户困惑

替代方案：当 <optgroup disabled> 不够用时

如果需要彻底屏蔽某一分组（包括初始化选中、JS 赋值、键盘导航），不能只依赖 HTML 属性，得配合 JS 控制：

• 初始化时检查 select.value 是否落在禁用分组内，若是，重置为有效选项或空值
• 监听 change 和 input 事件，拦截非法值：

  select.addEventListener('change', () => {
    const opt = select.selectedOptions[0];
    if (opt?.parentElement?.hasAttribute('disabled')) {
      select.value = ''; // 或 fallback 到第一个启用 option
    }
  });

• 禁用键盘导航：监听 keydown，检测方向键是否将焦点移入禁用分组，并 preventDefault()

真正复杂的不是怎么写 disabled，而是如何确保「禁用」在所有生命周期（渲染、交互、脚本、辅助访问）中都生效。别假设 HTML 属性能兜住全部场景。