CODEWITHSUNDEEP
javascripthtml
Biju CD
Biju CD

Reputation: 5109

disable all the elements in html

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

Upvotes: 20

Views: 56496

Answers (10)

latitov
latitov

Reputation: 471

To lock:

    var controls = document.querySelectorAll("button, input, select, textarea");
    for (var c of controls) {
        c.disabled = true;
    }

To unlock:

    var controls = document.querySelectorAll("button, input, select, textarea");
    for (var c of controls) {
        c.disabled = false;
    }

That simple.

Upvotes: 4

Skyfish
Skyfish

Reputation: 147

Depending what result you need you could also do

`document.getElementById('main_form').style.display = 'none';`

Where main_form is the id of your form. You can use the same technique to hide a div containing whatever elements you want to disable.

Upvotes: 0

DAVIDhaker
DAVIDhaker

Reputation: 29

Just and without crutches!

/**
 * 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

Upvotes: 1

Ujjwal Kumar Gupta
Ujjwal Kumar Gupta

Reputation: 2376

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.

Upvotes: -1

GOTO 0
GOTO 0

Reputation: 47644

The easiest way is to put all form elements you want to disable inside a <fieldset> and then disable the fieldset itself.

An example: http://jsfiddle.net/xdkf9b8j/1/

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

Upvotes: 36

RaYell
RaYell

Reputation: 70414

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[i].disabled = true;
}

Upvotes: 14

Ramin
Ramin

Reputation: 61

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:

   $('*').unbind();

Next disable all links on your page:

   $('a').each(function(){$(this).click(function(){return false;})});

and disable all inputs:

   $('input').attr('disabled', true);

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.

Upvotes: 3

bjoernwibben
bjoernwibben

Reputation: 1561

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.

Upvotes: 43

kayteen
kayteen

Reputation: 777

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,

Upvotes: 15

Christian C. Salvad&#243;
Christian C. Salvad&#243;

Reputation: 827218

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'));

Upvotes: 6

Related Questions