Layui中直接给<option>加disabled无效，需操作渲染后的<dd>元素：添加layui-disabled类、移除click事件，并处理键盘导航；建议封装函数并注意DOM结构兼容性。
直接在 <option> 上加 disabled 属性无效？
是的，layui 渲染后的 <select> 是用 div + ul + li 重绘的 dom，原生 <option disabled> 在渲染后不会体现禁用效果。你写 <option value="1" disabled>it服务</option>，下拉展开时依然能点中、能选中，只是原生 select 被隐藏了。
真正生效的方式：操作 Layui 渲染后的 DOM 结构
Layui 把每个 <option> 映射为一个 <dd> 元素，禁用某一项，本质是给对应 <dd> 加上 layui-disabled class，并阻止其 click 事件。
- 先确保已加载
form模块，且form.render()已执行过 - 找到目标
<select>的id或name，比如id="industry" - 等 Layui 渲染完成（可用
setTimeout或监听form.render后的回调）再操作 - 定位到对应
<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 路径。可以封装一个函数：
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() 链式调用会断裂——这是最容易被忽略的兼容性风险。
