禁用的表单字段无法提交数据

Question

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

如果不可能的话，有没有办法使用CSS或其他属性来阻止字段编辑而不隐藏它们？

我目前遇到的特殊情况是数据集的标识符应该显示在表单中（不可编辑） - 如果没有更好的解决方案，我想我会在禁用的字段之外使用一个隐藏的字段来保存实际值，并使用禁用的字段来显示它。

- bardiir

---

为什么不使用“readonly”而不是“disabled”？ - DevWL

复制所需的字段。使用类型为“hidden”的输入框填充需要提交的值。由于您已经禁用了该字段，因此它不会更改。当您填写一个时，请同时填写两个。 - Bruno

Answer 1

正如已经提到的: READONLY 对于 <input type='checkbox'> 和 <select>...</select> 不起作用。

如果您有一个带有禁用复选框/选择框且需要提交它们的表单，您可以使用jQuery：

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

这段代码在提交时从所有元素中移除了 disabled 属性。

- Mario Werner

---

哥们儿...我完整完成了一个页面，才发现这是个问题。太多的 JavaScript。然后我转到后端......没有一个提交通过。非常感谢你的回答！ - Fauxpas

这个脚本简洁而神奇，非常感谢。在MVC/Razor Pages中工作非常棒。 - pseudocoder

不错的解决方案，是我看过的MVC中最好的。谢谢。 - Jerzy Gebler

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

或者您也可以简单地添加一个隐藏字段。 - TheRealChx101

Answer 2

对于想要“禁用”的字段，可以使用CSS pointer-events:none（可能与灰色背景一起使用），这允许POST操作，例如：

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

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

参考: https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events

该CSS属性定义了元素是否应响应指针事件，例如鼠标点击或悬停。如果设置为“none”，则元素将不响应这些事件，而是将它们传递到下面的元素。此属性对于创建网页布局和用户交互非常有用。

- Tomasz

---

不建议使用此功能，因为它严重依赖于浏览器。 - Mario Werner

我认为这是最好的答案，而pointer-events现在几乎被普遍支持：https://caniuse.com/?search=pointer-events - Dan Swain

用户仍可以通过键盘导航到输入位置。 - mbehzad

Answer 3

我们也可以将readonly与以下属性组合使用： readonly onclick='return false;' 这是因为如果我们只使用readonly，则无法防止单选按钮被编辑。为了避免这种情况，我们可以将readonly与上述组合使用。它将限制编辑，并且元素的值也会在表单提交时传递。

- Kripa Yadav

---

使用 readonly 属性代替 disabled 属性来保留 <input> 数据是一种非常优雅的解决方案！ - Nik

Answer 4

在选择和文本标签中添加CSS或类到输入元素，如

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

- Paresh