18

我想要一组 HTML text<input>可以同时变灰（禁用）。我还希望他们所在的整个区域以某种方式变灰或至少明显禁用。我已经在桌面应用程序中看到过类似的事情。

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

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

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

7 回答 7

26

disabled="disabled" 参数是执行此操作的标准方法，您可以使用 jQuery 之类的东西动态禁用字段集中包含的所有表单元素（这是对相关表单元素进行分组的标准方法）。

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

于 2010-09-24T18:26:37.380 回答
11 
for(i=0; i<document.FormName.elements.length; i++) {
    document.FormName.elements[i].disabled=true;
}
document.getElementById("surroundingarea").style.backgroundColor = "#CCCCCC";

循环使用名称为 FormName 的表单元素并禁用每个元素.. 然后更改周围元素的背景颜色

于 2010-09-24T18:24:49.910 回答
8

请注意：如果你这样做disabled

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

你想要做的是：

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

如果您的表单位于

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

这切蛋糕了吗？

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

于 2017-01-10T09:19:33.300 回答
2

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


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

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

于 2010-09-24T18:24:59.803 回答
2

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

于 2010-09-24T18:25:47.350 回答
1

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

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

jsfiddle

于 2017-08-18T20:51:41.203 回答
0

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

for (x=0; x<document.YOURFORM.elements.length; x++) {
     document.YOURFORM.elements[x].disabled=true;
}
于 2010-09-24T18:24:44.610 回答