### 解决方案概述 为了使 HTML 表单提交时包含 `disabled` 状态的输入字段值，可以采用多种策略来绕过浏览器默认行为。一种常见做法是在提交前动态移除 `disabled` 属性或将这些字段转换为隐藏域。 #### 方法一：临时解除禁用并重新应用 可以在表单提交事件触发时先遍历所有带有 `disabled` 属性的 `<input>` 元素，将其属性暂时删除以便参与数据传输；待提交完成后再次恢复原状： ```javascript document.querySelector('form').addEventListener('submit', function(event){ const inputs = document.querySelectorAll('input[disabled]'); // 存储原始状态用于后续还原 let originalStates = []; inputs.forEach(input => { originalStates.push({element: input, disabled: true}); input.removeAttribute('disabled'); }); setTimeout(() => { // 提交后延迟执行以确保请求已发出 originalStates.forEach(state => state.element.disabled = state.disabled); }, 0); }, false); ``` 这种方法简单易懂，适用于大多数情况下的快速修复[^1]。 #### 方法二：创建副本作为隐藏字段 另一种更优雅的方式是利用 JavaScript 创建新的不可见 (`type="hidden"`) 的 `<input>` 副本来代替那些被标记为 `disabled` 的实际控件。这样做的好处是不会改变原有界面布局，并且能够保证所有必要的参数都能随表单一同发送给服务器端处理程序： ```html <form id="myForm"> <!-- 正常显示但不允许编辑 --> <input type="text" name="exampleField" value="someValue" disabled> </form> <script> (function(){ var form = document.getElementById('myForm'), fieldsToClone = Array.from(form.elements).filter(el=>el.disabled && el.tagName.toLowerCase()==='input'); fieldsToClone.forEach(field=>{ let clone = Object.assign(document.createElement('input'),{ type:'hidden', name:field.name, value:field.value }); field.form.appendChild(clone); }); })(); </script> ``` 此代码片段会在页面加载完毕之后自动运行一次，从而确保每次刷新都会正确复制最新的字段信息[^2]。