如何制作灰色的HTML形式？

Question

我想拥有一组HTML文本 <input>可以同时被弄清楚（禁用）。我还希望他们所处的整个区域以某种方式被弄清楚或至少明显地禁用。我已经在桌面应用程序中看到了这样的事情。

关于简单/优雅的方法的任何想法吗？我正在尝试避免手动设置每个 disabled="disabled", ，也有一个 区域 周围 <input>表明表格的整个部分是不可编辑的。

编辑：对不起，我应该再提几件事...

1. 一切都是本地的。我不使用PHP或ASP或类似的东西...只是HTML，JavaScript和CSS。也没有jQuery！
2. 我想用JavaScript动态启用/禁用“区域”
3. 不是 <form>, ，只是一堆 <input>'

Answer 1

禁用=“禁用”参数是执行此操作的标准方法，您可以使用jQuery之类的内容来动态禁用字段集中包含的所有表单元素（这是分组相关表单元素的标准方式）。

另外，您可以将部分透明的Div放在现场集的顶部。这还将从鼠标点击中提供一些阻止表单元素的阻塞，但不会防止对它们进行表格。您仍然应该禁用表单元素本身。

Answer 2

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

循环通过名称formName并禁用每个元素的元素。然后更改周围元素的背景颜色

Answer 3

请注意：如果您确实禁用>

如果用户提交表单，则不会传输输入元素。

您想做的是：

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

如果您的表格在

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

那切蛋糕了吗？

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

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");
  });

我没有检查它，所以我希望这会起作用:)

Answer 5

如果您说您不想玩“禁用”属性 - 那么您还可以将某些透明的div定位在HTML表单上，该表格（正确）可以使外观表格为残疾人 - 用户可以看到表格，但是不要单击/输入任何信息...然后，基于某些事件，您只需使用JS删除/隐藏此DIV并制作“启用”表单。

Answer 6

您可以浏览所有表单元素并禁用它们。未经测试，但请尝试这样的事情：

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

Answer 7

这里的人们有循环的答案 - 无需。采用 .children().

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

JSFIDDLE