禁用输入框的值将不会被提交。

Question

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

Values of disabled inputs will not be submitted

在其他浏览器中是一样的吗？

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

- omg

---

你可以设置一个'readonly'属性。例如，Chrome将其呈现为一个禁用的字段，但会提交它。 - peterrus

可能是禁用表单输入不会出现在请求中的重复问题。 - hazzik

Answer 1

disabled 属性的输入框将不会提交数据。

使用 readonly 属性：

<input type="text" readonly />

这里有源代码

- Fred K

---

@FrankFang，好的，但是当我将数据传递给Laravel Collective的Blade模板时，它不起作用。不能以那种方式发送数据。 - ssi-anik

@ssi-anik readonly 可以使用，只需确保将 "name" 属性传递给输入框即可。 - BenNov

“readonly”是被广泛接受的标准吗？根据developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly的说法，似乎不是。 - ᴍᴇʜᴏᴠ

我不明白为什么只有输入框和文本区域才有只读属性... 如果我想要“禁用”一个下拉列表但仍然通过表单提交发送值，该怎么办？ - Masiorama

@Masiorama 在这种情况下，首选的方法是设置 <select name="mysel" disabled>[...]</select> 并添加 <input type="hidden" name="mysel" value="_value_of_select_">。相同的名称不是问题，因为选择不会被提交。至于值，隐藏的值将被发送，这是可以的，因为选择是只读的，所以您事先知道选择的值。选择框、复选框、单选按钮等没有只读属性，因为它们不会更改值，而是更改 selected、checked 等属性。 - Niki Romagnoli

@NikiRomagnoli 谢谢回复。我有点不喜欢这种暗示使用相同名称的两个不同输入的方法，但我想这是一个好的解决方法。尽管如此，我会尝试一下，谢谢！ - Masiorama

Answer 2

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

更多信息（17.12.1小节）

属性定义

disabled [CI] 当设置表单控件的时候，这个布尔属性会禁用用户对控件的输入。当被设置后， disabled 属性会对元素产生以下影响：

• 禁用控件不能获得焦点；
• 在 Tab 键导航中跳过禁用控件；
• 禁用控件不能成功提交；

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

这个属性是可以继承的，但是本地声明会覆盖继承的值。

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

在此示例中，INPUT 元素处于禁用状态，因此无法接收用户输入，其值也不会随表单一起提交。

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

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

- Aziz

---

解决方法：添加一个与被禁用的输入框相同名称/值的隐藏输入框。 - John Kugelman

有关哪些浏览器遵守，哪些不遵守的任何信息？ - Allisone

请使用 readonly="readonly" 替代 disabled 属性 :) 参见 https://dev59.com/Qms05IYBdhLWcg3wQvke - Adriano

@Allisone：Firefox和Chrome似乎遵守这个规则（禁用的输入不会被提交）。我没有在其他浏览器上尝试过。 - Adriano

@JohnKugelman 为什么要用相同的名称？无论如何，禁用的那个都不会被提交...最好给隐藏的一个真实的名称，并为禁用的一个使用不同的名称。 - Arth

Answer 3

您可以使用三个方法模拟禁用功能：

1. HTML：readonly属性（这样在表单提交时可以使用输入框中的值。此外，用户无法更改输入的值）

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

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

- Novice_JS

Answer 4

它们没有被提交，因为W3C规范中这样写着。

17.13.2 成功的控件

成功的控件是“有效”的提交条件。 [snip]

• 禁用的控件不能成功（即无效）。

换句话说，该规范表示，禁用的控件被视为无效，不适合提交。

- MiffTheFox

Answer 5

<input type="text" disabled /> 

不要使用 disabled，而是使用 readonly

<input type="text" readonly />

- Rasathurai Karan

Answer 6

有两个属性，即readonly和disabled可以使输入框半只读。但它们之间存在微小的差异。

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

• readonly属性将使您的输入文本不可编辑，用户将无法更改它。
• disabled属性不仅会使您的输入文本不可用(无法更改)，还无法提交。

jQuery方法（1）：

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

jQuery方法（2）：

$("#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引入的。

- Elyas Hadizadeh

Answer 7

禁用的控件不能成功，并且一个成功的控件才能被提交为“有效”控件。这就是为什么禁用的控件不会随表单一起提交的原因。

- Juan de Parras

Answer 8

控件即使在只读属性下仍可点击。如果您想禁用该控件，但仍要发布其值。您可以考虑创建一个隐藏字段，并赋予与您的控件相同的值。然后创建一个 jQuery，当选择改变时。$('#your_select_id').change(function () { $('#your_hidden_selectid').val($('#your_select_id').val()); });

- Johnine

Answer 9

这是解决方案，仍然使用禁用属性。 首先在加载时禁用您的输入。

$(document).ready(function(){
  $("formselector:input").prop("disabled",true);
  $( "formselector" ).submit(function( event ) {
      $(":disabled").prop("disabled",false);
      });
});

在提交时启用所有内容，这将确保所有内容都被发布。

- Mohamad Elnaqeeb