Layui表单select如何实现禁用某一个具体的option选项-Layui教程-PHP中文网

Layui中直接给加disabled无效，需操作渲染后的元素：添加layui-disabled类、移除click事件，并处理键盘导航；建议封装函数并注意DOM结构兼容性。

直接在 `<option></option>` 上加 `disabled` 属性无效？

是的，layui 渲染后的 <select></select> 是用 div + ul + li 重绘的 dom，原生 <option disabled></option> 在渲染后不会体现禁用效果。你写 <option value="1" disabled>it服务</option>，下拉展开时依然能点中、能选中，只是原生 select 被隐藏了。

真正生效的方式：操作 Layui 渲染后的 DOM 结构

Layui 把每个 <option></option> 映射为一个 <dd></dd> 元素，禁用某一项，本质是给对应 <dd></dd> 加上 layui-disabled class，并阻止其 click 事件。

先确保已加载 form 模块，且 form.render() 已执行过
找到目标 <select></select> 的 id 或 name，比如 id="industry"
等 Layui 渲染完成（可用 setTimeout 或监听 form.render 后的回调）再操作

定位到对应 <dd></dd>：通常按顺序索引，或通过 data-value 匹配，例如：

$("#industry").next(".layui-select-title").next(".layui-select-dropdown").find("dl dd[data-value='1002']").addClass("layui-disabled").off("click");

禁用后仍可键盘导航？要补全交互逻辑

只加 layui-disabled class 并不能阻止键盘方向键切换到该选项，也不能跳过它。如果用户用 Tab 进入下拉、再按 ↓ 键，焦点仍会停在被禁用项上。

需同时监听 keydown 事件，在下拉展开时拦截方向键逻辑
更稳妥的做法是：在 form.on('select(filterName)') 中校验值，若为禁用项则手动还原上一个有效值
禁用项建议加上视觉提示，比如灰色文字：
```
$("dd[data-value='1002']").css("color", "#c0c0c0");
```

动态禁用/启用某 option 的封装建议

别每次手写 DOM 路径。可以封装一个函数：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

function toggleOptionDisabled(selectId, value, disabled) {
  const $select = $("#" + selectId);
  const $dd = $select.next().next().find("dl dd[data-value='" + value + "']");
  if (disabled) {
    $dd.addClass("layui-disabled").off("click");
  } else {
    $dd.removeClass("layui-disabled").on("click", function() {
      $select.val($(this).data("value")).trigger("change");
      layui.form.render("select", selectId);
    });
  }
}
// 使用：toggleOptionDisabled("industry", "1002", true);

注意：这个方案依赖 Layui 当前 DOM 结构（v2.9.x 稳定），若未来版本调整下拉结构，.next().next() 链式调用会断裂——这是最容易被忽略的兼容性风险。