如何制作灰显的 HTML 表单？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3789844/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make a greyed-out HTML form?
提问by Tony R
I'd like to have a group of HTML text <input>'s that can be all greyed-out (disabled) at the same time. I also want the entire area they are in to somehow be greyed-out or at least visibly disabled. I've seen things like this done in desktop applications.
我想要一组<input>可以同时全部变灰（禁用）的 HTML 文本。我还希望他们所在的整个区域以某种方式变灰或至少明显被禁用。我在桌面应用程序中看到过这样的事情。
Any ideas on an easy/elegant way to do it? I'm trying to avoid manually setting each to disabled="disabled", and also have an areasurrounding the <input>'s that indicates that entire portion of the form is non-editable.
关于简单/优雅的方法的任何想法？我试图避免手动将每个设置为disabled="disabled"，并且在's周围有一个区域<input>，表明表单的整个部分是不可编辑的。
EDIT: Sorry, I should mention a few more things...
编辑：对不起，我应该再提几件事......
- Everything is local. I'm not using PHP or ASP or anything like that... just HTML, JavaScript, and CSS. Also no jquery!
- I want to enable/disable the "area" dynamically with JavaScript
- It's NOT a
<form>, just a bunch of<input>'s
- 一切都是本地的。我没有使用 PHP 或 ASP 或类似的东西...只是 HTML、JavaScript 和 CSS。也没有jquery！
- 我想用 JavaScript 动态启用/禁用“区域”
- 这不是一个
<form>，只是一堆<input>的
回答by Powertieke
The disabled="disabled" parameter is the standard way to do this, and you could use something like jQuery to dynamically disable all of the form elements contained in a fieldset (Which is the standard way of grouping related form elements) on the fly.
disabled="disabled" 参数是执行此操作的标准方法，您可以使用 jQuery 之类的东西动态禁用字段集中包含的所有表单元素（这是对相关表单元素进行分组的标准方法）。
Alternatively you could place a partially transparent div on top of the fieldset. This will also provide some blocking of the form elements from mouse clicks, but will not protect against tabbing to them. You should still disable the form elements themselves.
或者，您可以在字段集的顶部放置一个部分透明的 div。这也将提供一些阻止鼠标单击的表单元素，但不会防止对它们进行 Tab 键。您仍然应该禁用表单元素本身。
回答by lando
for(i=0; i<document.FormName.elements.length; i++) {
document.FormName.elements[i].disabled=true;
}
document.getElementById("surroundingarea").style.backgroundColor = "#CCCCCC";
loops through the elements of the form with the name FormName and disable each element.. then change the background color of the surrounding element
循环使用名为 FormName 的表单元素并禁用每个元素..然后更改周围元素的背景颜色
回答by canoodle
Please notice: if you do disabled
请注意：如果你这样做 disabled
The input-element won't be transmitted if the user submits the form.
如果用户提交表单，则不会传输输入元素。
What you want to do instead is:
你想要做的是：
<input type="text" name="surname" value="Korpela" readonly>
If your form is inside a
如果您的表单在一个
<div style="background-color: grey;">
Does that cut the cake?
这能切蛋糕吗？
回答by Ventus
You can simply use jQuery to disable all forms elements in that area, like:
您可以简单地使用 jQuery 禁用该区域中的所有表单元素，例如：
//assuming that area is a div element with id lets say disabled-area
$(document).ready(function(){
$("#disabled-area input").attr("disabled", "disabled");
});
I didn't check it, so I hope this will work :)
我没有检查它，所以我希望这会起作用:)
回答by Laimoncijus
If you say you don't want to play with "disabled" property - then you could also position some transparent DIV over HTML form, which (styled properly) could make look form as disabled - users will be able to see the form, but not click/enter any information into it... Then, based on some event, you simply can remove/hide this DIV with JS and make the form "enabled".
如果你说你不想玩“禁用”属性 - 那么你也可以在 HTML 表单上放置一些透明的 DIV，它（样式正确）可以使表单看起来被禁用 - 用户将能够看到表单，但是不要单击/输入任何信息...然后，根据某些事件，您只需使用 JS 删除/隐藏此 DIV 并使表单“启用”即可。
回答by Thielicious
回答by Brad
You can step through all of the form elements and disable them. Untested, but try something like this:
您可以单步执行所有表单元素并禁用它们。未经测试，但尝试这样的事情：
for (x=0; x<document.YOURFORM.elements.length; x++) {
document.YOURFORM.elements[x].disabled=true;
}
