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

how can I disable everything inside a form using javascript/jquery?

提问by Luci

I have a form that pop up inside a layer, and I need to make everything inside that form read only regarding what type of input it is. Anyway to do so?

我有一个在图层内弹出的表单，我需要将该表单中的所有内容设为只读，仅了解它是什么类型的输入。无论如何要这样做？

采纳答案by Tim Down

This is quite simple in plain JavaScript and will work efficiently in all browsers that support read-only form inputs (which is pretty much all browsers released in the last decade):

这在纯 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;
}

回答by Nick Craver

You can use the :inputselector, and do this:

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

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

:inputselects all <input>, <select>, <textarea>and <button>elements. Also the attribute is readonly, if you use disabledto the elements they won't be posted to the server, so choose which property you want based on that.

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

回答by piotr_cz

With HTML5 it's possible to disable all inputs contained using the <fieldset disabled />attribute.

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

disabled:

If this Boolean attribute is set, the form controls that are its descendants, except descendants of its first optional element, are disabled, i.e., not editable. They won't received any browsing events, like mouse clicks or focus-related ones. Often browsers display such controls as gray.

禁用：

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

Reference: MDC: fieldset

参考：MDC：字段集

回答by Shanu

Its Pure Javascript :

它的纯 Javascript ：

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

回答by Umar Asghar

You can do this the easiest way by using jQuery. It will do this for all input, select and textarea elements (even if there are more than one in numbers of these types).

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

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

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

or you can do this as well but this will disable all elements (only those elements on which it can be applied).

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

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

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

---

---

disabled property can applies to following elements:

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

• button
• fieldset
• input
• optgroup
• option
• select
• textarea

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

But its upto you that what do you prefer to use.

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

回答by Wojciechu

Old question, but nobody mentioned using css:

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

pointer-events: none;

pointer-events: none;

Whole form becomes immune from click but also hovers.

整个表单不受点击影响，但也会悬停。

回答by Māris Kise?ovs

$("#formid input, #formid select").attr('disabled',true);

or to make it read-only:

或使其只读：

$("#formid input, #formid select").attr('readonly',true);

回答by nyandereian

Old question, but right now you can do it easily in pure javascriptwith an array method:

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

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

1) form.elementsreturns a collection with all the form controls (inputs, buttons, fieldsets, etc.) as an HTMLFormControlsCollection.

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

2) Array.from()turns the collection into an array object.

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

3) This allows us to use the array.forEach()method to iterate through all the items in the array...

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

4) ...and disable them with formElement.disabled = true.

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

回答by SHS

// get the reference to your form 
// you may need to modify the following block of code, if you are not using ASP.NET forms  
var theForm = document.forms['aspnetForm'];
if (!theForm) {
 theForm = document.aspnetForm;
}

// this code disables all form elements  
var elements = theForm.elements;
for (var i = 0, len = elements.length; i < len; ++i) {
 elements[i].disabled = true;
}

回答by Dan Hargis

This one has never failed me and I did not see this approach on the other answers.

这个从来没有让我失望，我没有在其他答案中看到这种方法。

//disable inputs
$.each($("#yourForm").find("input, button, textarea, select"), function(index, value) {
  $(value).prop("disabled",true);
 });