禁用的表单字段不提交数据[重复]

Posted 2023-02-21

【中文标题】禁用的表单字段不提交数据[重复]

【英文标题】：Disabled form fields not submitting data [duplicate]

【发布时间】：2012-02-14 02:12:39

【问题描述】：

有没有办法（使用属性标志或类似的东西）启用被禁用的表单字段来提交数据？

或者，如果这不可能，有没有办法阻止使用 css 或任何其他属性编辑字段而不是禁用而不隐藏它们？

我目前的特殊情况是数据集的标识符，它应该以表格形式显示（不可编辑） - 如果没有更好的解决方案，我认为除了禁用的字段之外，我还会使用隐藏字段保留实际值，禁用显示它的值。

【问题讨论】：

为什么不使用“只读”而不是“禁用”？

【参考方案1】：

正如已经提到的：READONLY 不适用于 <input type='checkbox'> 和 <select>...</select>。

如果您有一个 Form 禁用了复选框/选择并且需要提交它们，您可以使用 jQuery：

$('form').submit(function(e) 
    $(':disabled').each(function(e) 
        $(this).removeAttr('disabled');
    )
);

此代码从提交时的所有元素中删除disabled 属性。

【讨论】：

兄弟...直到完成整个页面，我才意识到这是一个问题。这么多的javascript。然后我移到后端，......他们都没有通过。非常感谢这个答案！

这个脚本简洁而神奇，非常感谢。非常适合在 MVC/Razor 页面中工作

不错的解决方案，我看到的 MVC 最好的解决方案。谢谢。

如果您只想禁用复选框，请将$(':disabled') 更改为$('input[type="checkbox"]:disabled')

或者你也可以简单地添加一个隐藏字段

【参考方案2】：

在您想要“禁用”的字段上使用 CSS 指针事件：无（可能与灰色背景一起），以允许 POST 操作，例如：

<input type="text" class="disable">

.disable
pointer-events:none;
background:grey;

参考：https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

【讨论】：

不推荐使用这个，因为它严重依赖浏览器。

【参考方案3】：

我们也可以使用带有以下属性的只读-

readonly onclick='return false;'

这是因为如果我们只使用只读，那么单选按钮将是可编辑的。为避免这种情况，我们可以将 readonly 与上述组合一起使用。它将限制编辑，并且元素的值也将在表单提交期间传递。

【参考方案4】：

将 CSS 或类添加到在 select 和文本标签中起作用的输入元素，如

style="pointer-events: none;background-color:#E9ECEF"