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

Posted 2023-03-06

技术标签:

【中文标题】如何使用 javascript/jquery 禁用表单中的所有内容？【英文标题】：how can I disable everything inside a form using javascript/jquery? 【发布时间】：2011-03-24 03:37:53 【问题描述】：

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

【问题讨论】：

【参考方案1】：

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

或将其设为只读：

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

【讨论】：

只读不等于禁用。【参考方案2】：

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

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

:input 选择所有 <input>、<select>、<textarea> 和 <button> 元素。另外属性是readonly，如果你对元素使用disabled，它们不会被发布到服务器，所以根据这个选择你想要的属性。

【讨论】：

buttons、input[type=submit] 和 input[type=button] 不支持 readonly 属性。示例见jsfiddle.net/z4hoh443，源文档见developer.mozilla.org/en-US/docs/Web/html/Element/input。即使显示为灰色，复选框和比例按钮仍然可以更改其值。【参考方案3】：

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

【讨论】：

所以用户仍然可以通过点击提交按钮来提交表单？ elements[i].disabled = true; 怎么样？ @CoryRobinson：disabled 与 readOnly 不同。 ***.com/questions/7730695/…【参考方案4】：

谢谢蒂姆，

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

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

【讨论】：

【参考方案5】：

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

已禁用：

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

参考：MDC: fieldset

【讨论】：

这适用于 html5。此外，如果您有任何更改字段的 js，您将需要禁用该 js。我将我的字段集作为表单的包装元素，并使用此 js 排除任何 js 进程更改字段数据：if($('#formID').parent().prop("disabled")==true) return false; 我希望这个属性也被定义在<form> 上，这样我们就可以禁用不使用<fieldset> 的表单。最优雅的解决方案。我不必更改一百万个标签，而只需更改一个。【参考方案6】：

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

【讨论】：

【参考方案7】：

它的纯 Javascript ：

var fields = document.getElementById("YOURDIVID").getElementsByTagName('*');
for(var i = 0; i < fields.length; i++)

    fields[i].disabled = true;

【讨论】：

【参考方案8】：

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

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

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

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

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

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

但你喜欢用什么由你决定。

【讨论】：

【参考方案9】：

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

pointer-events: none;

整个表单不受点击影响，而且悬停。

【讨论】：

【参考方案10】：

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

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

【讨论】：

【参考方案11】：

老问题，但现在你可以在 pure javascript 中使用 array 方法轻松完成：

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 禁用它们。

【讨论】：

【参考方案12】：

对于它的价值，知道这篇文章很旧......这不是只读方法，但对我有用。我使用 form.hidden = true。

【讨论】：

您好，欢迎来到 ***，无论问题的年龄有多大，您的知识总是有价值和赞赏的。请提供有关您的答案为何以及如何起作用的更多详细信息。祝你好运。 var form = document.getElementById("your_form_id"); var 元素 = form.elements; for (var i = 0, len = elements.length; i 【参考方案13】：

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

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

【讨论】：

【参考方案14】：

这是我使用的另一个纯 JavaScript 示例。在没有 Array.from() 作为 NodeList has it's own forEach 方法的情况下工作正常。

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

【讨论】：

【参考方案15】：

Javascript：禁用所有表单字段：

function disabledForm()
  var inputs = document.getElementsByTagName("input"); 
    for (var i = 0; i < inputs.length; i++)  
        inputs[i].disabled = true;
     
     var selects = document.getElementsByTagName("select");
     for (var i = 0; i < selects.length; i++) 
         selects[i].disabled = true;
     
    var textareas = document.getElementsByTagName("textarea"); 
    for (var i = 0; i < textareas.length; i++)  
        textareas[i].disabled = true;
    
    var buttons = document.getElementsByTagName("button");
    for (var i = 0; i < buttons.length; i++) 
        buttons[i].disabled = true;

要启用表单的所有字段，请参见下面的代码

function enableForm()
      var inputs = document.getElementsByTagName("input"); 
        for (var i = 0; i < inputs.length; i++)  
            inputs[i].disabled = false;
         
         var selects = document.getElementsByTagName("select");
         for (var i = 0; i < selects.length; i++) 
             selects[i].disabled = false;
         
        var textareas = document.getElementsByTagName("textarea"); 
        for (var i = 0; i < textareas.length; i++)  
            textareas[i].disabled = false;
        
        var buttons = document.getElementsByTagName("button");
        for (var i = 0; i < buttons.length; i++) 
            buttons[i].disabled = false;

【讨论】：

【参考方案16】：

作为 Tim Down 的回答，我建议：