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.
SHARE

Nothing shocks me, I'm a Software Engineer. And I am not young enough to know everything. I live in World Wide Web and from there take care of this website. This website communicates about my work, learning and experience. I believe life is short, and it is for loving, sharing, learning and connecting. So lets connect..