HTML的optgroup禁用属性怎么写-html教程-PHP中文网

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

html的optgroup禁用属性怎么写

HTML `<optgroup></optgroup>` 的 `disabled` 属性写法

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

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

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

<option></option>

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

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

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

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

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

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

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

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

初始化时检查 select.value 是否落在禁用分组内，若是，重置为有效选项或空值

监听 change 和 input 事件，拦截非法值：

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