disable all the elements in html.

Question

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

Answer 1

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

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

for (var i = 0; i < len; i++) {
    elems.disabled = true;
}

Answer 2

Try this,

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

Or else you can try this too, as RaYell said

function disableForm() {
    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;
    }
}

To disable the whole page you can find some info here,

Answer 3

All the form elements (inputs, selects, textareas) within a form, are accesible through the form.elements HTMLCollection, you can iterate the collection disabling each element:

function disableForm(form) {
var length = form.elements.length,
    i;
  for (i=0; i < length; i++) {
    form.elements[i].disabled = true;
  }
}

Usage examples:

disableForm(document.forms[0]);
disableForm(document.getElementById('formId'));

Answer 4

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 jQuery Plugin that uses a similar technique.