MVC中禁用文本框无法随表单提交至控制器问题咨询

这是前端开发里挺常见的坑，我之前做表单提交的时候也踩过！核心原因是：浏览器默认会忽略所有带有disabled属性的表单元素，不会把它们的名称和值发送到服务器。下面给你几个实用的解决方案，根据你的场景选就行：

方案1：用readonly替代disabled #

如果你的需求只是让用户无法编辑输入框，但需要保留提交值的功能，直接把disabled换成readonly就搞定了。readonly属性会让输入框无法编辑，但浏览器会正常提交它的名称和值。

示例代码：

<input type="text" name="username" value="固定值" readonly>

⚠️ 注意：readonly的默认样式和disabled不太一样（不会自动灰掉），如果需要保持灰显的视觉效果，可以加自定义CSS：

input[readonly] {
  background-color: #eee;
  cursor: not-allowed;
}

方案2：搭配隐藏输入框（Hidden Input） #

如果必须保留disabled的视觉效果（比如输入框灰显、无法点击），可以在页面上放一个disabled的可见输入框，同时添加一个同名的隐藏输入框，把要提交的值同步到隐藏框里。

静态值示例：

<!-- 展示给用户的禁用输入框 -->
<input type="text" name="orderId" value="ORD12345" disabled>
<!-- 实际提交的隐藏输入框 -->
<input type="hidden" name="orderId" value="ORD12345">

如果是动态生成的值（比如通过JS修改禁用输入框的值），记得在修改时同步更新隐藏框的值：

// 假设禁用输入框的ID是disabledOrderId，隐藏框ID是hiddenOrderId
const disabledInput = document.getElementById('disabledOrderId');
const hiddenInput = document.getElementById('hiddenOrderId');

// 当禁用输入框的值变化时，同步到隐藏框
disabledInput.addEventListener('change', function() {
  hiddenInput.value = this.value;
});

方案3：提交表单前临时移除disabled属性 #

如果需要动态控制，或者不想额外加隐藏框，可以在表单提交的瞬间，临时移除输入框的disabled属性，让浏览器正常提交它的值。

示例代码：

// 获取表单元素
const form = document.getElementById('myForm');
// 获取禁用的输入框
const disabledTextbox = document.getElementById('myDisabledTextbox');

// 监听表单提交事件
form.addEventListener('submit', function() {
  // 移除disabled属性
  disabledTextbox.removeAttribute('disabled');
});

这个方法的好处是不用额外DOM元素，用户全程看到的都是禁用状态，只有提交前一瞬间才解除禁用，完全不影响体验。

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