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

我有一个在图层中弹出的表单,并且我需要使该表单中的所有内容都仅是关于它是什么类型的输入的信息。 反正这样做吗?

Luci asked 2020-07-31T17:38:13Z
10个解决方案
40 votes

您可以使用<input>选择器,并执行以下操作:

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

<input>选择所有<input>、2991402242165326849、2991404624165326850和<button>元素。 此外,属性为readonly,如果对元素使用disabled,则不会将其发布到服务器,因此请根据该属性选择所需的属性。

Nick Craver answered 2020-07-31T17:52:38Z
37 votes

这在普通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 answered 2020-07-31T17:52:13Z
33 votes

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

禁用:

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

参考:MDC:字段集

piotr_cz answered 2020-07-31T17:53:12Z
5 votes

它的纯Javascript:

var fields = document.getElementById("YOURDIVID").getElementsByTagName('*');
for(var i = 0; i < fields.length; i++)
{
    fields[i].disabled = true;
}
Shanu answered 2020-07-31T17:53:32Z
3 votes

您可以使用jQuery最简单的方法。 它将对所有输入,选择和textarea元素执行此操作(即使这些类型的数目不止一个)。

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

或者您也可以这样做,但是这将禁用所有元素(仅那些可以对其应用元素的元素)。

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


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

  • 纽扣
  • 场集
  • 输入
  • 组合
  • 选项
  • 选择
  • 文本区域

但是,由您决定要使用什么。

Umar Asghar answered 2020-07-31T17:54:36Z
1 votes
$("#formid input, #formid select").attr('disabled',true);

或使其只读:

$("#formid input, #formid select").attr('readonly',true);
Māris Kiseļovs answered 2020-07-31T17:54:56Z
0 votes
// 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;
}
SHS answered 2020-07-31T17:55:12Z
0 votes

老问题,但没人提到使用CSS:

pointer-events: none;

整体形式不受点击的影响,但也徘徊。

Wojciechu answered 2020-07-31T17:55:37Z
0 votes

这个从来没有让我失败过,在其他答案上我也没有看到这种方法。

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

Dan Hargis answered 2020-07-31T17:55:57Z
-5 votes

谢谢蒂姆,

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

 var form = document.getElementById("form");
                var elements = form.elements;
                for (var i = 0, len = elements.length; i < len; ++i) {
                    elements[i].setAttribute("onmousedown", "");
                }
Sudeep nayak answered 2020-07-31T17:56:22Z
translate from https://stackoverflow.com:/questions/3386954/how-can-i-disable-everything-inside-a-form-using-javascript-jquery