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

纯粹的Javascript：

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

Answer 5

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

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

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

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

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

按钮
字段集
输入
OPTGROUP
选项
选择
textarea的

但是您认为您更喜欢使用它。

Answer 6

旧问题，但是现在您可以使用数组方法在纯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将其禁用。

Answer 7

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

或将其设为只读：

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

Answer 8

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

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

Answer 9

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

Answer 10

旧问题，但没有人提到使用CSS：

pointer-events: none;

整个形式都不受点击的影响，而且悬停。

Answer 11

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

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

Answer 12

了解它的价值，知道这篇文章已经很老了……这不是只读方法，但是对我有用。我使用form.hidden = true。

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

Answer 14

Javascript：禁用所有表单域：

Welcome to the base calculator
Please provide the first number: 5
Please provide the second number: 5
Please provide mathematical preference: + - * / : +
The sum of 5 + 5 is 10
Press 'q' to quit or anything to go on:
Please provide the first number or empty to use the previous result (10):
Please provide the second number: 5
Please provide mathematical preference: + - * / : *
The result of multiplying 10 * 5 is 50
Press 'q' to quit or anything to go on:
Please provide the first number or empty to use the previous result (50):12
Please provide the second number: 12
Please provide mathematical preference: + - * / : -
The subtraction of 12 - 12 is 0
Press 'q' to quit or anything to go on: q
The program will now quit

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

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

Answer 15

谢谢Tim，

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

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

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

15 个答案: