Question

我希望有一组HTML文本<input>可以同时显示为灰色（禁用）。我也希望他们所处的整个区域都以某种方式变灰或至少明显禁用。我在桌面应用程序中看到过这样的事情。

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

编辑：对不起，我还要提一些事情......

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

Answer 1

disabled =“disabled”参数是执行此操作的标准方法，您可以使用类似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

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


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

我没有检查，所以我希望这会有效：）

Answer 4

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

Answer 5

请注意：如果你这样做禁用＆GT;

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

你要做的是：

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

如果您的表单在

中

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

这会破坏蛋糕吗？

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

Answer 6

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

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

Answer 7

这里的人们有循环的答案 - 没有必要。使用var start = 0; $(document).on("click", ".add_button", function(){ start++; $(".result").append($(this).clone().text('Add'+start)); }); $(document).on("click","#delete_button",function(){ if ($('.add_button').length > 1) { $('.add_button').eq(start--).remove() } });。

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<button type="button" class="btn add_button">add</button>
<button type="button" class="btn" id="delete_button">delete</button>
<div class="result"></div>

<强> jsfiddle

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

7 个答案: