如何使用JavaScript/jQuery禁用表单内的所有元素？

Question

我有一个弹出在层中的表单，我需要使该表单中的所有输入框都变为只读。有什么办法可以做到吗？

- Luci

Answer 1

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

disabled:

如果设置了这个布尔属性，除了第一个可选元素的后代之外，其后代是表单控件时，它们将被禁用，即不可编辑。它们将不会接收任何浏览事件，例如鼠标点击或与焦点相关的事件。通常，浏览器会将这些控件显示为灰色。

参考：MDC: fieldset

- piotr_cz

---

这在HTML5中有效。如果您有任何更改字段的JS，您需要禁用该JS。我将我的fieldset放置为表单的包装元素，并使用此JS来排除任何JS处理更改字段数据：if($('#formID').parent().prop("disabled")==true) { return false; } - Chris O

我希望这个属性也能定义在<form>上，这样我们就可以禁用那些没有使用<fieldset>的表单。 - Dai

最优雅的解决方案。我不需要改变数百万个标签，只需要改变一个。 - suchoss

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;
}

- Tim Down

---

那么用户仍然可以通过单击提交按钮来提交表单吗？ - Aamir Afridi

elements[i].disabled = true; 这句话怎么样？ - Cory Robinson

@CoryRobinson：disabled与readOnly不同。https://dev59.com/mGsz5IYBdhLWcg3wrJ6- - Tim Down

Answer 3

你可以使用:input选择器来实现以下操作：

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

:input选取所有的<input>、<select>、<textarea>和<button>元素。如果使用disabled属性将禁用这些元素并且不会提交给服务器, 所以根据需要选择正确的属性。

- Nick Craver

---

button、input[type=submit] 和 input[type=button] 不支持 readonly 属性。请参见 https://jsfiddle.net/z4hoh443/ 获取示例，以及 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input 获取源文档。 - philfreo

尽管复选框和单选按钮显示为灰色，它们仍然可以更改其值。 - The Berga

Answer 4

这是纯JavaScript编写的：

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

- Shanu

Answer 5

虽然这个问题很老，但是没有人提到可以使用CSS来解决：

pointer-events: none;

整个表单将不会响应点击事件，但是仍然会响应鼠标悬停事件。

- Wojciechu

---

这个方法非常有效。完美的答案。我在我的CSS中定义了一个form.disabled选择器，并将CSS类应用于表单。它也可以用于样式化或取消隐藏元素（如“表单正在提交”消息或其他任何内容）。这将JavaScript所需的最小化到绝对最低限度。 - SuperNova

只禁用指针事件，显然用户仍然可以使用键盘（例如TAB键）访问。 - kubicle

Answer 6

您可以使用jQuery来最简单地完成此操作。它将为所有输入，选择和文本区域元素执行此操作（即使这些类型的元素数量超过一个）。

代码如下： $("input, select, option, textarea", "#formid").prop('disabled',true); 您也可以这样做，但这会禁用所有元素（仅适用于可以应用该属性的元素）。

代码如下： $("*", "#formid").prop('disabled',true);

---

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

- button - fieldset - input - optgroup - option - select - textarea 但是，具体使用哪种方法取决于您。

- Umar Asghar

Answer 7

虽然这是一个旧问题，但现在你可以使用 纯JavaScript 中的 数组方法 轻松完成：

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

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

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

3) 这使我们可以使用 array.forEach() 方法遍历数组中的所有项目...

4) ...并使用 formElement.disabled = true 禁用它们。

- nyandereian

Answer 8

这里有另一个我使用的纯JavaScript示例。即使没有Array.from()，作为NodeList它也可以正常工作，因为它有自己的forEach方法。

document.querySelectorAll('#formID input, #formID select, #formID button, #formID textarea').forEach(elem => elem.disabled = true);

- Brennan

Answer 9

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

或者将其设置为只读：

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

- Māris Kiseļovs

---

只读不等于禁用。 - Tim Down

Answer 10

通过在表单上设置禁用交互的属性来禁用表单

<style>form[busy]{pointer-events:none;}</style>
<form>....</form>
<script>
function submitting(event){
    event.preventDefault();
    const form = this; // or event.target;
    // just in case...
    if(form.hasAttribute('busy')) return;
    // possibly do validation, etc... then disable if all good
    form.setAttribute('busy','');
    
    return fetch('/api/TODO', {/*TODO*/})
    .then(result=>{ 'TODO show success' return result; })
    .catch(error=>{ 'TODO show error info' return Promise.reject(error); })
    .finally(()=>{
        form.removeAttribute('busy');
    })
    ;  
}
Array.from(document.querySelectorAll('form')).forEach(form=>form.addEventListener('submit',submitting);
</script>

- jimmont