【踩坑记录】Thymeleaf 下拉框设置 disabled 变灰色，但依旧可以点击选择

一、问题现象

先说一下我遇到的情况。

最近在做后台管理页面的时候，需要根据用户的操作动态禁用某个下拉框。我用 JS 给 select 设置禁用，页面上看控件确实变成了灰色，视觉上像是「非活性」状态。

结果一点击下拉框，选项列表竟然还能弹出来，而且还能正常切换选择！

也就是说：看着是灰色的，实际还能用，这波属于是「视觉诈骗」了 😅

项目环境：SpringBoot + Thymeleaf 前后端一体开发。

二、一开始我的错误写法

一开始我想当然地用了 readonly 属性，心想输入框可以用它来只读，下拉框应该也行吧？

错误代码（脱敏处理）：

vbnet 复制代码

<select readonly>
    <option value="1">选项一</option>
    <option value="2">选项二</option>
    <option value="3">选项三</option>
</select>

结果一运行发现：完全不生效。

去查了一下才知道，readonly 是 <input> 的专属属性，<select> 标签根本不支持它。也就是说，你写了也白写，浏览器直接无视。

三、尝试第二种写法（踩第二个坑）

既然 readonly 不行，那我就用 Thymeleaf 的 th:disabled 呗，看上去挺优雅的：

ini 复制代码

<select th:disabled="${isDisabled}">
    <option value="1">选项一</option>
    <option value="2">选项二</option>
</select>

页面初始化的时候确实生效了，下拉框变灰且不可点击。

但是！ 好景不长。

我页面里有 Tab 切换，一切换到其他 Tab 再切回来，下拉框的禁用状态直接没了，又变成可点击状态了。

原因分析：

th:disabled 是服务端渲染时生效的，也就是页面加载的时候根据后端数据渲染一次。后续通过 JS 动态修改页面状态，并不会同步回 Thymeleaf 的表达式，所以一切换 Tab（页面部分刷新/重绘），状态就丢了。

四、最终正确解决方案

既然 th:disabled 只管初始化，那我就在前端用 JS 的 prop 方法来动态控制。 正确写法：

javascript 复制代码

// 禁用下拉框
$("#xxxSelect").prop("disabled", true);

// 启用下拉框
$("#xxxSelect").prop("disabled", false);

注意： 这里一定要用 .prop()，不要用 .attr()。用 attr 设置 disabled 可能会出现一些奇怪的问题，prop 才是操作 DOM 属性的正确姿势。 Tab 切换状态丢失的解决方案：

不要只在页面初始化时赋值一次。每次切换回当前 Tab 时，重新执行一次状态赋值。

示例：

javascript 复制代码

// 切换 Tab 时触发
function onTabChange(tabId) {
    if (tabId === 'targetTab') {
        // 根据业务状态重新设置下拉框的 disabled
        var isDisabled = getSomeCachedState(); // 从缓存或全局变量读取
        $("#xxxSelect").prop("disabled", isDisabled);
    }
}

五、额外踩坑补充

我在做项目的时候，式样书上经常写「非活性」三个字。很多新入行的同事第一反应就是写 readonly。

这里给大家整理一下：

控件	正确做法	说明
`<input>` 文本框	`readonly`	只读，值可以正常提交后台
`<select>` 下拉框	`disabled`	禁用，不会提交参数到后台
`<input type="radio">`	`disabled`	禁用，不会提交参数到后台

重要补充坑点：

设置 disabled 之后，该控件的值不会随表单提交到后端。

如果你的业务逻辑需要这个值（比如编辑页面中，这个字段禁用但仍需传回原值），记得用隐藏域单独存一份：

xml 复制代码

<!-- 下拉框被禁用，值不会提交 -->
<select id="xxxSelect" disabled>
    <option value="1" selected>选项一</option>
</select>

<!-- 隐藏域单独传值 -->
<input type="hidden" name="xxxId" value="1" />

这个点如果你不知道，排查半天都找不到为什么后端收不到参数，别问我怎么知道的 😭

六、总结

踩完这一圈坑，给大家总结几点：

select 下拉框不要用 readonly ，无效，它只对 input 生效。
th:disabled 只在页面初始化时渲染一次，后续 JS 动态控制必须操作 DOM 属性。
Tab 切换会重置前端状态，每次切回当前 Tab 时要重新赋值，别偷懒。
disabled 之后字段不会随表单提交后台，如果业务上需要传值，记得用隐藏域兜底。

希望这篇文章能帮到同样踩坑的朋友～如果你也有其他 Thymeleaf 相关的坑，欢迎评论区交流 🚀