如何使用javascript/jquery禁用表单中的所有内容？

Question

我有一个弹出一个图层的表单,我需要让该表单中的所有内容只读取它的输入类型.无论如何这样做？

Answer 1

您可以使用:input选择器,并执行以下操作:

$("#myForm :input").prop('readonly', true);

:input选择所有<input>,<select>,<textarea>和<button>元件.此属性也是readonly,如果您使用disabled元素,它们将不会发布到服务器,因此请根据该属性选择所需的属性.

Answer 2

这在普通的JavaScript中非常简单,并且可以在支持只读表单输入的所有浏览器中高效工作(这几乎是过去十年中发布的所有浏览器):

var form = document.getElementById("your_form_id");
var elements = form.elements;
for (var i = 0, len = elements.length; i < len; ++i) {
    elements[i].readOnly = true;
}

Answer 3

使用HTML5,可以禁用使用该<fieldset disabled />属性包含的所有输入.

禁用:

如果设置了此布尔属性,则表示作为其后代的表单控件(第一个可选元素的后代除外)将被禁用,即不可编辑.他们不会收到任何浏览事件,例如鼠标点击或与焦点相关的事件.浏览器经常将这些控件显示为灰色.

参考:MDC:fieldset

Answer 4

老问题，但没有人提到使用 css：

pointer-events: none;

整个窗体不受点击影响，但也会悬停。

Answer 5

它的纯Javascript：

var fields = document.getElementById("YOURDIVID").getElementsByTagName('*');
for(var i = 0; i < fields.length; i++)
{
    fields[i].disabled = true;
}

Answer 6

您可以使用 jQuery 以最简单的方式执行此操作。它将为所有 input、select 和 textarea 元素执行此操作（即使这些类型的数量不止一个）。

$("input, select, option, textarea", "#formid").prop('disabled',true);

或者您也可以这样做，但这将禁用所有元素（仅那些可以应用它的元素）。

$("*", "#formid").prop('disabled',true);

disabled 属性可以应用于以下元素：

• 按钮
• 字段集
• 输入
• 选择组
• 选项
• 选择
• 文本区

但是，您更喜欢使用什么取决于您。

Answer 7

老问题，但现在您可以使用数组方法在纯 javascript 中轻松完成：

form = document.querySelector('form-selector');
Array.from(form.elements).forEach(formElement => formElement.disabled = true);

1)form.elements返回一个包含所有表单控件（输入、按钮、字段集等）的集合作为 HTMLFormControlsCollection。

2)Array.from()将集合转换为数组对象。

3）这允许我们使用该array.forEach()方法来遍历数组中的所有项...

4) ...并使用formElement.disabled = true.