optgroup 的 disabled 属性不生效，HTML 规范明确其“无效果”；禁用需落实到每个 option 元素，并配合 CSS 和 JS 确保行为与视觉一致。
optgroup 的 disabled 属性是否生效？
直接写 <optgroup disabled></optgroup> 在大多数浏览器里**看起来没反应**——选项依然可点、键盘仍能聚焦、视觉上也没灰掉。这不是你代码写错了，而是 HTML 规范里明确说明：disabled 属性在 optgroup 上是**被忽略的**（HTML Standard 中定义为“no effect”）。所以别怪 Chrome/Firefox/Safari 不配合，是标准就没让它起作用。
为什么不能直接禁用 optgroup？
根本原因在于：浏览器渲染 select 时，optgroup 本身不是可交互控件，它只是语义分组容器；真正接收用户操作的是里面的 option 元素。禁用逻辑只作用于 option 或整个 select，不穿透到分组层级。
实际可行的替代方案
想实现“某一分组不可选”，必须把 disabled 落实到每个 option 上。常见做法：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 手动给该
optgroup下所有option加disabled属性：<option disabled value="x">xxx</option> - 服务端或 JS 动态生成时，遍历目标
optgroup的children，批量设option.disabled = true - 若需视觉区分，可加 CSS：
select option:disabled { color: #999; }（注意 Safari 对:disabled伪类支持较晚，iOS 15+ 才稳定） - 避免只禁用
optgroup标签还留着label——用户虽点不中选项，但可能误以为“这组能选”，建议搭配灰色文字或注释说明
容易被忽略的细节
禁用 option 后，select 的 value 仍可能保留原值（哪怕当前选中项已 disabled），提交表单时该值**不会被发送**（符合预期），但 JS 读 select.value 仍返回字符串，需用 select.selectedOptions[0]?.value 判断是否真有有效选中项。另外，disabled 的 option 无法通过键盘上下键聚焦——这点比假装禁用 optgroup 更可靠。
立即学习“前端免费学习笔记（深入）”；
