Thymeleaf select下拉框设disabled后控制器无法获取值问题咨询

给下拉框设置readonly属性时，控件呈置灰状态，但仍可选择选项值，表单提交后控制器可正常接收该字段值。
给下拉框设置disabled属性时，控件同样置灰且可正确展示选中值（UI展示符合不可编辑预期），但表单提交后后端控制器无法获取该字段的提交值。
需要实现用户无法修改下拉框选项、同时表单提交时值可正常被控制器接收的效果，当前实现代码如下：

<div>
  <select name="dose" id="dose" class="form-control form-control-sm selective" th:field="*{dose}" th:disabled="disabled">
        <option value="">Choose...</option>
        <option th:each="dose: ${doses}"
          th:selected="${doseSelected == dose}"
          th:text="${dose}"
          th:value="${dose}">
        </option>
  </select>
</div>

HTML原生规范中，readonly属性对<select>下拉元素不生效，这是设置readonly后依然可以选择选项的核心原因；而设置了disabled属性的表单元素按照规范不会随表单提交，因此后端无法拿到对应字段值。

• 方案1：新增隐藏域同步值（优先推荐，无JS依赖）
  保留th:disabled="disabled"实现UI层面的不可编辑效果，在下拉框同级新增一个隐藏输入框，值绑定和下拉框相同的字段，提交时隐藏域的值会被正常发送到后端，完全满足需求。
  修改后代码示例：

  <div>
    <select name="dose" id="dose" class="form-control form-control-sm selective" th:field="*{dose}" th:disabled="disabled">
          <option value="">Choose...</option>
          <option th:each="dose: ${doses}"
            th:selected="${doseSelected == dose}"
            th:text="${dose}"
            th:value="${dose}">
          </option>
    </select>
    <!-- 新增隐藏域存值，用于表单提交 -->
    <input type="hidden" name="dose" th:value="*{dose}">
  </div>
  

• 方案2：表单提交前临时移除disabled属性
  给表单绑定提交事件，在提交触发的瞬间移除下拉框的disabled属性，让下拉框的值可以被正常序列化提交。如果是同步表单提交，页面提交后会直接跳转，不需要手动恢复disabled状态；如果是Ajax异步提交，在请求发出后再把disabled属性加回去即可。
  参考JS代码：

  const form = document.querySelector('form')
  const doseSelect = document.getElementById('dose')
  form.addEventListener('submit', () => {
    doseSelect.disabled = false
    // 异步提交场景下可在请求完成回调中执行 doseSelect.disabled = true 恢复状态
  })
  

• 方案3：不使用disabled，通过事件拦截阻止修改
  移除下拉框的disabled属性，通过CSS模拟置灰的不可编辑样式，同时绑定mousedown、keydown事件阻止用户展开下拉、切换选项值。这种方案下拉框本身处于可提交状态，值可以正常传到后端，但需要拦截所有可能修改值的交互场景，维护成本更高，不做优先推荐。

内容的提问来源于stack exchange，提问作者TryMine