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

我有一个在层中弹出的表单，我需要使表单中的所有内容都是只读的，只考虑它是什么类型的输入。无论如何，你想这样做吗

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

或者将其设置为只读：

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

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

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

---

选择所有

、

、

和

元素。此外，该属性是

只读

，如果您对元素使用

禁用

，这些元素将不会发布到服务器，那么请根据该属性选择所需的属性。

这在纯JavaScript中非常简单，并且在所有支持只读表单输入的浏览器中都能有效工作（这几乎是过去十年中发布的所有浏览器）：

---

var form=document.getElementById（“您的表单id”）；
var元素=form.elements；
对于（变量i=0，len=elements.length；i

谢谢蒂姆

这真的很有帮助。 当我们有控件并处理它们上的事件时，我做了一些调整

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

---

var form=document.getElementById（“表单”）；
var元素=form.elements；
对于（变量i=0，len=elements.length；i

使用HTML5，可以使用

属性禁用包含的所有输入

残疾人士：

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

引用：

//获取对表单的引用
//如果不使用ASP.NET表单，则可能需要修改以下代码块
var theForm=document.forms['aspnetForm']；
if（！theForm）{
theForm=document.aspnetForm；
}
//此代码禁用所有表单元素
var元素=form.elements；
对于（变量i=0，len=elements.length；i

其纯Javascript：

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

var fields=document.getElementById（“YOURDIVID”）.getElementsByTagName（'*'）；
对于（变量i=0；i

您可以使用jQuery以最简单的方式完成此操作。它将对所有输入、选择和文本区域元素执行此操作（即使这些类型中有多个）

$（“输入、选择、选项、文本区域”和“#formid”）.prop（'disabled'，true）；

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

$（“*”，“#formid”）.prop（'disabled'，true）；

---

禁用的属性可以应用于以下元素：

• 钮扣
• 字段集
• 输入
• optgroup
• 选择权
• 挑选
• 文本区

---

但是你喜欢用什么取决于你。

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

指针事件：无；

---

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

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

//禁用输入
$.each（$（“#yourForm”）.find（“输入，按钮，文本区域，选择”），函数（索引，值）{
$（值）.prop（“已禁用”，true）；
})

这是一个老问题，但现在您可以在纯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

禁用它们，因为知道这篇文章很老了。。。这不是一种只读方法，但对我很有效。我使用form.hidden=true。

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

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

form[busy]{指针事件：无；}
....
功能提交（事件）{
event.preventDefault（）；
const form=this；//或event.target；
//以防万一。。。
if（form.hasAttribute（'busy'））返回；
//可能进行验证等…如果一切正常，则禁用
form.setAttribute（'busy'，''）；
返回fetch（'/api/TODO'，{/*TODO*/}）
.then（结果=>{'TODO show success'返回结果；}）
.catch（错误=>{“TODO显示错误信息”返回承诺。拒绝（错误）；}）
.最后（（）=>{
form.removeAttribute（'busy'）；
})
;  
}
数组.from（document.queryselectoral（'form'））.forEach（form=>form.addEventListener（'submit'，submiting））；

这里是我使用的另一个纯JavaScript示例。如果不使用Array.from（）作为节点列表方法，效果很好

---

只读与禁用不同。

按钮

s、

输入[type=submit]

和

输入[type=button]

不支持

只读

属性。有关源文档的示例和，请参阅。即使它们显示为灰色，复选框和比率按钮仍然可以更改其值。因此用户仍然可以通过单击“提交”按钮提交表单。

元素[i]如何.disabled=true；

？@CoryRobinson:

disabled

不同于

readOnly

。这在html5中有效。此外，如果您有任何更改字段的js，则需要禁用该js。我将我的字段集作为表单的包装元素，并使用此js排除任何js进程更改字段数据：

如果（$（“#formID”）.parent（）.prop（“disabled”）==true）{return false；}

我希望这个属性也是在

上定义的，这样我们就可以禁用那些没有

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

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

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