title: How to disable the clicking of any element on the page after a jQuery click
body: <p>I'm trying to disable the entire page by not allowing any further clicking anywhere on the page once already clicked. I'm aware there are so many sources with similar context, but didn't quite find any satisfying answer to my solution.</p>
  <p>js:</p>
  <pre><code>  $(&quot;#link&quot;).on( &quot;click&quot;, function() {
      $(this).attr('disabled','disabled');
      $(&quot;div.container&quot;).css(&quot;opacity&quot;, 0.4);
      $(&quot;#loading&quot;).css(&quot;display&quot;,&quot;block&quot;);
  });
  </code></pre>
  <p>With the above code I'm just able to grey out the page, but I also want to be able to disable any clicks on the page when greyed out.</p>
  <p>html:</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
    &lt;a href=&quot;#&quot;&gt;Link&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>#loading  {
  background: url(../images/loading.png);
  display: none;
  margin: auto;
  }
  </code></pre>
  <p>Any ideas on this?</p>