如何设置表单元素的只读和禁用属性

Posted 2023-05-17

可以直接利用【表单大师】制作表单，将字段属性前面的不可编辑打勾，这样填表者就只能看到该字段，无法编辑了

至于你提问中的禁用是指的禁用什么呢？

参考技术A 一般有2种方法使input文本框不可编辑：
disabled 属性规定应该禁用 input 元素被禁用的 input 元素既不可用，也不可点击。可以设置 disabled 属性，直到满足某些其他的条件为止（比如选择了一个复选框等等）。然后，就需要通过 javascript 来删除 disabled 值，将 input 元素的值切换为可用。disabled 属性无法与 <input type="hidden"> 一起使用。<input type="text" disabled="disabled" />
readonly 属性规定输入字段为只读只读字段是不能修改的。不过，用户仍然可以使用 tab 键切换到该字段，还可以选中或拷贝其文本。
readonly 属性可以防止用户对值进行修改，直到满足某些条件为止（比如选中了一个复选框）。然后，需要使用 JavaScript 消除 readonly 值，将输入字段切换到可编辑状态。
readonly 属性可与 <input type="text"> 或 <input type="password"> 配合使用。<input type="text" readonly="readonly">

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

【中文标题】如何使用 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 的回答，我建议：

const FORM_ELEMENTS = document.getElementById('idelementhere').elements;
for (i = 0; i < FORM_ELEMENTS.length; i++) 
    FORM_ELEMENTS[i].disabled = true;

这将禁用表单中的所有元素。