禁用输入的值将不会提交

Posted 2023-02-15

【中文标题】禁用输入的值将不会提交

【英文标题】：Values of disabled inputs will not be submitted

【发布时间】：2010-11-24 06:03:41

【问题描述】：

这是我在 Firefox 中通过 Firebug 发现的。

其他浏览器也一样吗？

如果是这样，这是什么原因？

【问题讨论】：

您可以设置“只读”属性。例如，Chrome 将其呈现为禁用字段，但确实提交了它。

Disabled form inputs do not appear in the request的可能重复

【参考方案1】：

他们没有被提交，因为that's what it says in the W3C specification。

17.13.2 成功控制

成功的控件对于提交是“有效的”。 [剪辑]

禁用的控件无法成功。

换句话说，规范说被禁用的控件被认为是无效的提交。

【参考方案2】：

是的，所有浏览器不应提交禁用的输入，因为它们是只读的。

More information（第 17.12.1 节）

属性定义

disabled [CI] 当为表单控件设置时，此布尔属性 禁用用户输入控件。设置后，禁用属性 对元素有以下影响：

禁用的控件不会获得焦点。 在标签导航中会跳过禁用的控件。 禁用的控件无法成功。

以下元素支持禁用属性：BUTTON、INPUT、 OPTGROUP、OPTION、SELECT 和 TEXTAREA。

此属性是继承的，但本地声明会覆盖 继承价值。

禁用元素的呈现方式取决于用户代理。为了 例如，一些用户代理“灰显”禁用菜单项、按钮 标签等

在本例中，INPUT 元素被禁用。因此，它不能 接收用户输入也不会将其值与表单一起提交。

<INPUT disabled name="fred" value="stone">

注意。动态修改禁用值的唯一方法 属性是通过脚本实现的。

【讨论】：

解决方法：添加一个与禁用输入具有相同名称/值的<input type="hidden"> 元素。

关于哪个浏览器执行和哪个不遵守的任何信息？

改用 readonly="readonly" :) 见***.com/questions/7357256/…

@Allisone：Firefox 和 Chrome 似乎遵守了这一点（禁用的输入不提交）。其他浏览器没试过。

@JohnKugelman 为什么同名？残障者无论如何都不会提交.. 还不如把真名给隐藏者，并为残障者使用不同的名字

【参考方案3】：

有两个属性，即readonly 和disabled，可以进行半只读输入。但它们之间有细微的差别。

<input type="text" readonly />
<input type="text" disabled />

readonly 属性会禁用您的输入文本，并且用户无法再更改它。 disabled 属性不仅会使您的输入文本

禁用

（不可更改）而且

无法提交

。

jQuery方法（一）：

$("#inputID").prop("readonly", true);
$("#inputID").prop("disabled", true);

jQuery方法（二）：

$("#inputID").attr("readonly","readonly");
$("#inputID").attr("disabled", "disabled");

javascript 方法：

document.getElementById("inputID").readOnly = true;
document.getElementById("inputID").disabled = true;

PS disabled 和 readonly 是标准的 html 属性。 prop 与jQuery 1.6 一起介绍。

【参考方案4】：

即使在只读属性上，选择控件仍然可以点击

如果您仍想禁用该控件，但又希望发布它的值。 您可能会考虑创建一个隐藏字段。与您的控件具有相同的值。

然后在选择更改时创建一个 jquery

$('#your_select_id').change(function () 
    $('#your_hidden_selectid').val($('#your_select_id').val());
);

【参考方案5】：

Disabled 控件不能成功，成功的控件对于提交是“有效的”。 这就是禁用控件不随表单提交的原因。

【参考方案6】：

你可以用三样东西来模仿残疾人：

HTML：readonly 属性（这样输入中的值可以用于表单提交。用户也不能更改输入值）

CSS：'pointer-events':'none'（阻止用户点击输入）

HTML：tabindex="-1"（阻止用户导航到键盘输入）

【参考方案7】：

disabled输入不会提交数据。

使用readonly 属性：

<input type="text" readonly />

Source here

【讨论】：

@FrankFang，好的，但是，当我将数据传递给 Laravel 集体的刀片模板时。它行不通。不能这样发送数据。

@ssi-anik readonly 有效，只需确保将“name” attr 传递给输入。

readonly 是公认的标准吗？根据developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly 看起来不像。