在HTML中，为<option>添加disabled属性可禁用单个下拉选项，使其变灰、不可选且不提交；该属性为布尔型，仅书写即生效，不影响其他选项或下拉框整体功能。

在 HTML 的 <select> 下拉菜单中，可以通过为单个 <option> 元素添加 disabled 属性，来禁用该选项。

直接在 option 标签上加 disabled

这是最常用、最直接的方式。被禁用的选项会变灰、不可点击，且不会被表单提交（即使被选中也不会生效）。

• 语法：<option value="xxx" disabled>禁用项</option>
• 注意：disabled 是布尔属性，写上即生效，无需赋值（如 disabled="true" 或 disabled="disabled" 都不推荐）
• 示例：

<select name="city">
  <option value="">请选择城市</option>
  <option value="bj">北京</option>
  <option value="sh" disabled>上海（暂不可选）</option>
  <option value="gz">广州</option>
</select>

禁用选项不影响其他选项的可用性

disabled 只作用于当前 <option>，不会影响下拉框整体或其它选项。用户仍可正常选择其它未禁用项。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 禁用项不能通过鼠标点击或键盘方向键选中
• 如果页面加载时某 option 已被设为 selected 且同时有 disabled，多数浏览器会忽略该默认选中（即实际无默认值），除非另有未禁用的 selected 项
• 表单提交时，disabled 的 option 对应的值不会被发送

动态禁用/启用选项（JavaScript）

可通过 JS 操作 option.disabled 属性实现运行时控制：

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

• 禁用：document.querySelector('option[value="sh"]').disabled = true;
• 启用：document.querySelector('option[value="sh"]').disabled = false;
• 注意：修改后视觉状态会立即更新，无需刷新页面

和 select 的 disabled 区别

不要混淆：<select disabled> 会让整个下拉框不可用；而 <option disabled> 只禁用单个选项。

• 整个 select 被禁用时，所有选项都不可交互，且通常灰色显示
• 单个 option 被禁用时，下拉框本身仍可展开和操作，只是该条目不可选
• 两者可共存，但逻辑需清晰（例如：部分地区因政策暂不开放，但下拉框仍要供用户选其它城市）