blocks|key|1474324|text|我建议使用“Lightbox”的-style方式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1474325|在页面上方添加一个绝对定位的、透明的全屏div层。这样，用户甚至不能点击一个链接。|1474326|为了给用户一个页面被禁用的视觉反馈，你可以将div设置为50%25透明的黑色。|1474327|顺便说一句，这里也是一个使用类似技术的jQuery+Plugin。|offset|length|1474328|entityMap|0|LINK|mutability|MUTABLE|url|http://malsup.com/jquery/block/^0|0|0|0|J|D|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|U|8|@]|9|@$H|V|I|W|1|X]]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

I suggest to do it the "Lightbox"-style way.

Add an absolute positioned, transparent, full screen div Layer above the Page.
This way, the user can't even click on a Link.

To give the user a visual feedback that the page is disabled, 
you can make the div e. g. 50% transparent black.

BTW, here is also a <a href="http://malsup.com/jquery/block/" rel="noreferrer">jQuery Plugin</a> that uses a similar technique.

blocks|key|1474430|text|最简单的方法是将所有想要禁用的表单元素放在一个<fieldset>中，然后禁用字段集本身。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1474431|一个例子：http://jsfiddle.net/xdkf9b8j/1/|1474432|如果您不想要字段集周围的边框，请根据css将其删除。|1474433|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/xdkf9b8j/1/^0|N|A|0|5|V|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@$9|V|A|W|1|X]]|E|$]]|$1|H|3|I|5|6|7|Y|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]]]

The easiest way is to put all form elements you want to disable inside a <code>&lt;fieldset&gt;</code> and then disable the fieldset itself.

An example: <a href="http://jsfiddle.net/xdkf9b8j/1/">http://jsfiddle.net/xdkf9b8j/1/</a>

If you don't want the border around the fieldset, remove it per css.

blocks|key|1259499|text|我不知道你为什么需要这样做，但这是可行的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1259500|//+this+will+disable+all+input+elements
var+elems+=+document.getElementsByTagName('input');
var+len+=+elems.length;

for+(var+i+=+0;+i+<+len;+i%2B%2B)+{
++++elems[i].disabled+=+true;
}|code-block|syntax|javascript|1259501|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I don't know why you would need that but this will work:

<pre><code>// this will disable all input elements
var elems = document.getElementsByTagName('input');
var len = elems.length;

for (var i = 0; i &lt; len; i++) {
 elems[i].disabled = true;
}
</code></pre>

blocks|key|1259554|text|尝尝这个,|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1259555|function+disableForm(theform)+{
++++++++if+(document.all+%7C%7C+document.getElementById)+{
++++++++++++for+(i+=+0;+i+<+theform.length;+i%2B%2B)+{
++++++++++++var+formElement+=+theform.elements[i];
++++++++++++++++if+(true)+{
++++++++++++++++++++formElement.disabled+=+true;
++++++++++++++++}
++++++++++++}
++++++++}
++++}|code-block|syntax|javascript|1259556|或者你也可以试试，就像RaYell说的那样|1259557|function+disableForm()+{
++++var+inputs+=+document.getElementsByTagName("input");
++++for+(var+i+=+0;+i+<+inputs.length;+i%2B%2B)+{
++++++++inputs[i].disabled+=+true;
++++}
++++var+selects+=+document.getElementsByTagName("select");
++++for+(var+i+=+0;+i+<+selects.length;+i%2B%2B)+{
++++++++selects[i].disabled+=+true;
++++}
++++var+textareas+=+document.getElementsByTagName("textarea");
++++for+(var+i+=+0;+i+<+textareas.length;+i%2B%2B)+{
++++++++textareas[i].disabled+=+true;
++++}
++++var+buttons+=+document.getElementsByTagName("button");
++++for+(var+i+=+0;+i+<+buttons.length;+i%2B%2B)+{
++++++++buttons[i].disabled+=+true;
++++}
}|1259558|要禁用整个页面，您可以找到一些信息here，|offset|length|1259559|entityMap|0|LINK|mutability|MUTABLE|url|http://fczaja.blogspot.com/2009/02/disable-all-page-elements-with.html^0|0|0|0|0|H|4|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

Try this,

<pre><code>function disableForm(theform) {
 if (document.all || document.getElementById) {
 for (i = 0; i &lt; theform.length; i++) {
 var formElement = theform.elements[i];
 if (true) {
 formElement.disabled = true;
 }
 }
 }
 }
</code></pre>

Or else you can try this too, as RaYell said

<pre><code>function disableForm() {
 var inputs = document.getElementsByTagName("input");
 for (var i = 0; i &lt; inputs.length; i++) {
 inputs[i].disabled = true;
 }
 var selects = document.getElementsByTagName("select");
 for (var i = 0; i &lt; selects.length; i++) {
 selects[i].disabled = true;
 }
 var textareas = document.getElementsByTagName("textarea");
 for (var i = 0; i &lt; textareas.length; i++) {
 textareas[i].disabled = true;
 }
 var buttons = document.getElementsByTagName("button");
 for (var i = 0; i &lt; buttons.length; i++) {
 buttons[i].disabled = true;
 }
}
</code></pre>

To disable the whole page you can find some info <a href="http://fczaja.blogspot.com/2009/02/disable-all-page-elements-with.html" rel="noreferrer">here</a>,

blocks|key|1474272|text|表单中的所有表单元素(输入、选择、文本)都可以通过form.elements+HTMLCollection访问，您可以迭代集合以禁用每个元素：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1474273|function+disableForm(form)+{
var+length+=+form.elements.length,
++++i;
++for+(i=0;+i+<+length;+i%2B%2B)+{
++++form.elements[i].disabled+=+true;
++}
}|code-block|syntax|javascript|1474274|使用示例：|1474275|disableForm(document.forms[0]);
disableForm(document.getElementById('formId'));|1474276|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en/DOM/form.elements^0|P|S|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|F|7|Y|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|Z|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|10|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]]]

All the form elements (inputs, selects, textareas) within a form, are accesible through the <a href="https://developer.mozilla.org/en/DOM/form.elements" rel="noreferrer">form.elements HTMLCollection</a>, you can iterate the collection disabling each element:

<pre><code>function disableForm(form) {
var length = form.elements.length,
 i;
 for (i=0; i &lt; length; i++) {
 form.elements[i].disabled = true;
 }
}
</code></pre>

Usage examples:

<pre><code>disableForm(document.forms[0]);
disableForm(document.getElementById('formId'));
</code></pre>

blocks|key|1474396|text|有一次，我不得不为我的网站创建一个教程。我需要禁用页面上除某些元素之外的所有交互。为此，我使用了以下方法:首先，确保从页面元素中删除所有事件绑定。您可以使用以下命令来完成此操作：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1474397|+++$('*').unbind();|code-block|syntax|javascript|1474398|接下来，禁用页面上的所有链接：|1474399|+++$('a').each(function(){$(this).click(function(){return+false;})});|1474400|并禁用所有输入：|1474401|+++$('input').attr('disabled',+true);|1474402|代码需要在文档的末尾执行。顺便说一句，您可以在jquery选择器中排除一些元素，以使它们保持活动状态。|1474403|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|Y|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

Once i had to create a tutorial for my website. I needed to disable all interactions on a page excluding some elements. To do so i used this method: 
First make sure to remove all events bindings from your page elements. You can do this by using:

<pre><code> $('*').unbind();
</code></pre>

Next disable all links on your page:

<pre><code> $('a').each(function(){$(this).click(function(){return false;})});
</code></pre>

and disable all inputs:

<pre><code> $('input').attr('disabled', true);
</code></pre>

The code needs to be executed at the end of your document. BTW you may exclude some elements within jquery selector to keep them active.

blocks|key|1474546|text|只有拐杖和没有拐杖！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1474547|/**
+*+Enable/disable+all+form+controlls
+*+@param+status+Status:+true+-+form+active,+false+-+form+unactive
+*/
HTMLFormElement.prototype.setStatus+=+function+(status)+{
++++for+(var+i+in+this.elements)+{
++++++++this.elements[i].disabled+=+!status;
++++}
};

//+Example:
var+my_form+=+document.getElementById('my_form_with_many_inputs');
my_form.setStatus(false);+//+Disable+all+inputs+in+form
my_form.setStatus(true);+//+Enable+all+inputs+in+form|code-block|syntax|javascript|1474548|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Just and without crutches!

<pre><code>/**
 * Enable/disable all form controlls
 * @param status Status: true - form active, false - form unactive
 */
HTMLFormElement.prototype.setStatus = function (status) {
 for (var i in this.elements) {
 this.elements[i].disabled = !status;
 }
};

// Example:
var my_form = document.getElementById('my_form_with_many_inputs');
my_form.setStatus(false); // Disable all inputs in form
my_form.setStatus(true); // Enable all inputs in form
</code></pre>

blocks|key|1260019|text|要锁定：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1260020|++++var+controls+=+document.querySelectorAll("button,+input,+select,+textarea");
++++for+(var+c+of+controls)+{
++++++++c.disabled+=+true;
++++}|code-block|syntax|javascript|1260021|要解锁：|1260022|++++var+controls+=+document.querySelectorAll("button,+input,+select,+textarea");
++++for+(var+c+of+controls)+{
++++++++c.disabled+=+false;
++++}|1260023|就这么简单。|1260024|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

To lock:
<pre><code> var controls = document.querySelectorAll(&quot;button, input, select, textarea&quot;);
 for (var c of controls) {
 c.disabled = true;
 }
</code></pre>
To unlock:
<pre><code> var controls = document.querySelectorAll(&quot;button, input, select, textarea&quot;);
 for (var c of controls) {
 c.disabled = false;
 }
</code></pre>
That simple.

blocks|key|1474618|text|根据您需要的结果，您还可以执行以下操作|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1474619|`document.getElementById('main_form').style.display+=+'none';`|code-block|syntax|javascript|1474620|其中main_form是表单的id。您可以使用相同的技术来隐藏包含您想要禁用的任何元素的div。|offset|length|style|CODE|1474621|entityMap^0|0|0|2|9|18|3|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

Depending what result you need you could also do
<pre><code>`document.getElementById('main_form').style.display = 'none';`
</code></pre>
Where <code>main_form</code> is the id of your form. You can use the same technique to hide a <code>div</code> containing whatever elements you want to disable.

blocks|key|1259856|text|最好的方法是添加一个最高z索引宽度为100%25的virtually.It，height:100%25.It将覆盖整个页面，并使所有内容都不可点击，这意味着禁用div是最好的，因为它不会使用任何循环和任何复杂的代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1259857|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

The best way is to add a div with highest z-index having width:100% and height:100%.It will cover your entire page and make everything not clickable means disabled virtually.It is best,because it will not use any loop and any complex code.

How can we disable all the elements in html through javascript.The easiest way...

disable all the elements in html

我们如何通过javascript.The最简单的方式禁用html中的所有元素……

问禁用html中的所有元素
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问禁用html中的所有元素EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问禁用html中的所有元素
EN