禁用网页元素

How can I disable the whole webpage elements when a button is clicked to avoid unintended several click that causes many transactions?

Threads suggest to use a div so that when a button is clicked, the div will be put on top of the elements.

Is there other way to solve it aside from div overlay?

I am using JavaScript, JSP, JQuery, AJAX

You can use CSS pointer-event property, which will disable clicking of any control.

Refer: https://developer.mozilla.org/en/docs/Web/CSS/pointer-events

You can use following example to disable the whole content of webpage on any event by simply using JQuery fadein, fadeout functions.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#btn").click(function(){
      $("#cover").fadeIn(1000);//on event
      //some processing
      alert('processing');
      $("#cover").fadeOut(100); //after done.
    });
});
</script>
<style>
#hide{
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   opacity:0.50;
   background: #f2f2f2;
   z-index: 10;
   display: none;
}
</style>
</head>
<body>
  <div>
    <h1>This is a Heading</h1>
    <p>This is a paragraph.</p>
    <button id="btn" value="Click">Click</button>
  </div>
  <div id="hide"> 
  </div>
</body>
</html>

</div>