Disable-Enable all controls of page using jQuery

In this post, I will demonstrate a simple jQuery code to disable and enable all the controls of the page. jQuery provides (*) selector, which selects all the element of the page. We will use the * selector to disable and enable all the elements. For demo purpose, we will disable and enable controls on click of button. See below jQuery code.

$(document).ready(function() {
   $("#btnEnableDisable").toggle(function() {
      $("*").attr("disabled", "disabled"); 
          $(this).attr("disabled", ""); 
       }, function() {
          $("*").attr("disabled", ""); 
  });
});

As it's clear from code, toggle function is used for button. We set the "disabled" attribute of all the controls to "disabled" to make all the control disable. To enable all the control, we set blank value to "disabled" attribute. One thing to note here is that when we are disabling all the controls, it will also disable the button control. So we need to enable the button control, while disabling all the controls.

See live Demo and Code

Feel free to contact me for any help related to jQuery. I will gladly help you.