如何制作一个灰色的HTML表单？

Question

我希望有一组HTML文本的输入框<input>，同时可以全部变灰（禁用）。我还希望他们所在的整个区域变灰或者至少显示为禁用状态。我曾在桌面应用程序中看到过这样的做法。

有没有什么简单/优雅的方法来实现呢？我想避免手动设置每个<input>的disabled="disabled"属性，并且还要为<input>周围的整个“区域”指示整个表单部分是不可编辑的。

编辑：抱歉，我应该提到几件事...

1. 一切都是本地的。我没有使用PHP或ASP等任何内容...只是HTML，JavaScript和CSS。也没有jquery！
2. 我想用JavaScript动态启用/禁用“区域”
3. 这不是一个<form>，只是一堆<input>

- Tony R

---

你想要使用静态HTML禁用<input/>元素还是使用JavaScript或其他方式动态禁用它们？我在这个问题中探索了一些动态表单的内容；甚至为此创建了一个jQuery插件。 - maček

Answer 1

使用 disabled="disabled" 参数是标准方法，您可以使用 jQuery 等工具动态地禁用包含在 fieldset 中的所有表单元素（这是分组相关表单元素的标准方式）。

或者，您可以在 fieldset 上方放置一个部分透明的 div。这也会提供一些阻止来自鼠标点击的表单元素，但无法保护光标聚焦于它们上。您仍然应该禁用表单元素本身。

- Powertieke

---

我尝试在提交时禁用所有输入。这似乎会导致MVC3出现问题。当我在表单中禁用所有内容时，它无法正确地返回模型。 - user1003221

默认情况下，禁用的 HTML 元素不会将其值传递到 POST 请求。如果不希望出现这种情况，请使用 readonly。 - Filip

请注意，原帖明确表示不想要 jQuery 解决方案，这就是为什么我个人更喜欢 https://dev59.com/CG865IYBdhLWcg3wfeqU#3789857。 - Gwyneth Llewelyn

Answer 2

for(i=0; i<document.FormName.elements.length; i++) {
    document.FormName.elements[i].disabled=true;
}
document.getElementById("surroundingarea").style.backgroundColor = "#CCCCCC";

循环遍历名为FormName的表单元素并禁用每个元素，然后更改周围元素的背景颜色。

- lando

Answer 3

请注意：如果您使用disabled属性，当用户提交表单时，输入元素将不会被传输。

相反，您应该这样做：

<input type="text" name="surname" value="Korpela" readonly>

If your form is inside a

<div style="background-color: grey;">

能达到目标吗？

https://www.cs.tut.fi/~jkorpela/forms/readonly.html

- canoodle

---

他想让它变成灰色。readonly不能做到这一点，它只能禁用键盘控制。 - Thielicious

提供的链接出现404错误。 - undefined

Answer 4

您可以简单地使用jQuery来禁用该区域内的所有表单元素，如下所示：

  //assuming that area is a div element with id lets say disabled-area
  $(document).ready(function(){
    $("#disabled-area input").attr("disabled", "disabled");
  });

我没有检查过它，所以我希望这个能够工作 :)

- Ventus

---

OP明确表示他不想要一个jQuery的解决方案... - Gwyneth Llewelyn

Answer 5

如果您说您不想使用“disabled”属性进行操作-那么您可以在HTML表单上方放置一些透明的DIV，这样（经过适当的样式处理）可以让表单看起来像是被禁用了-用户可以看到表单，但无法点击/输入任何信息... 然后，基于某些事件，您可以使用JS删除/隐藏此DIV并使表单“启用”。

- Laimoncijus

---

我喜欢这个“变灰”区域的想法。我该如何让一个div浮动在另一个区域上方？我之前只做过内联的div... - Tony R

你可以使用绝对/相对CSS定位来实现。可以直接通过JS调整它们，也可以使用一些JS库，如jQuery，使事情变得更容易... - Laimoncijus

Answer 6

这里的人们都用循环来回答问题 - 没必要。使用.children()。

$('form').children().prop('disabled',true)

jsfiddle

这段内容与编程有关。

- Thielicious

Answer 7

您可以遍历所有表单元素并将它们禁用。尚未经过测试，但可以尝试以下代码：

for (x=0; x<document.YOURFORM.elements.length; x++) {
     document.YOURFORM.elements[x].disabled=true;
}

- Brad