如何制作灰色的HTML表单？

问题描述：

我想要一组HTML文本<input>，它们可以同时变为灰色（禁用）。我也希望他们所在的整个区域以某种方式变得灰暗或至少明显被禁用。我在桌面应用程序中看到过类似的东西。如何制作灰色的HTML表单？

任何想法在一个简单/优雅的方式来做到这一点？我试图避免手动将每个设置为disabled="disabled"，并且还有区域围绕着<input>的表示整个表单部分是不可编辑的。

编辑：对不起，我应该提到一些事情......

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

你想的''与元素静态HTML禁用或JavaScript或动态的东西禁用？我在[这个问题]中探讨了动态表单在某种程度上（http://stackoverflow.com/questions/3398603/how-to-create-a-dynamic-form-using-jquery/3408517#3408517）;甚至为它创建了一个[jQuery插件]（http://github.com/macek/jquery-input-depends-on）。 – 2010-09-24 18:28:31

答

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

或者，您可以在字段集顶部放置一个部分透明的div。这也将阻止鼠标单击的表单元素，但不会防止对它们进行标记。您仍然应该禁用表单元素本身。

我试着禁用所有提交输入。这似乎会导致MVC3的问题。当我禁用表单中的所有内容时，它不会正确回发模型。 – user1003221 2012-05-18 18:58:22

默认情况下，禁用的HTML元素不会将其值传播到发布请求。如果不需要，请使用readonly – Filip 2014-11-23 16:16:39

答

您可以通过所有的表单元素的步骤和禁用它们。未经检验的，但尝试是这样的：

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

答

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

遍历名为窗体名称窗体的元素和禁用每个元素..然后改变周围元素的背景颜色

答

你可以简单地使用jQuery禁止一切形式的在这方面的元素，如：


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

我没有检查它，所以我希望这将工作:)

此代码正在工作。 – Samarland 2016-07-13 13:38:35

答

如果你说你不想玩“禁用”属性 - 那么你也可以在HTML表单上放置一些透明的DIV，这样（正确设置）可以使外观形式为禁用 - 用户将能够看到表单，但不能点击/输入任何信息......然后，根据某些事件，只需使用JS删除/隐藏此DIV，并将表单设置为“启用”即可。

我喜欢这个让灰色区域“变白”的想法。如何让一个div浮动在另一个区域？我以前只做过内联div ... – 2010-09-24 18:46:49

你可以使用绝对/相对CSS定位。有可能通过JS直接调整这些或使用一些JS库，如jQuery，这使事情变得更容易... – Laimoncijus 2010-09-24 20:49:22

答

请注意：如果你禁用>

如果用户提交表单的输入元素将不会被传输。

你想要做的，而不是什么：

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

如果你的表格是

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

这是否切蛋糕里面？

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

不应该只读=“true”？ – 2017-07-23 07:12:56

他想让它变灰。 'readonly'不执行，它只会禁用键盘控制。 – Thielicious 2017-08-18 20:50:29

答

这里的人们有循环的答案 - 没有必要。使用.children()。

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

jsfiddle

如何制作灰色的HTML表单？

相关推荐