How to disable the clicking of any element on the page after a jQuery click

Question

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.

js:

  $("#link").on( "click", function() {
    $(this).attr('disabled','disabled');
    $("div.container").css("opacity", 0.4);
    $("#loading").css("display","block");
});

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.

html:

<div class="container">
  <a href="#">Link</a>
</div>

CSS:

#loading  {
background: url(../images/loading.png);
display: none;
margin: auto;
}

Any ideas on this?

I think this can help you http://stackoverflow.com/questions/15801713/how-do-i-disable-all-the-onclick-events-on-a-page — Cory, Nov 17 '15 at 23:56

Josh Sanger · Accepted Answer · 2015-11-18T03:00:33.783

2

What about putting an overlay on top of your content?

JS:

$(document).ready(function(){
    $("#link").on( "click", function() {
        $(body).append('<div id="overlay"></div>');
        $("#loading").show(); // sets css to display: block (can also use fadeIn()
    });
});

CSS:

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    opacity: 0.6;
    z-index: 100;
}
#loading {
    z-index: 101;
    position: relative;
    background: url(../images/loading.png);
    display: none;
    margin: auto;
}

edited Nov 18 '15 at 03:00

answered Nov 18 '15 at 00:07

Josh Sanger

784
4
7

Sorry, I thought that's what you meant in the original post. Are you trying to only allow 1 click per link? Or are you trying to prevent the whole page from being clickable once an item is clicked? – Josh Sanger Nov 18 '15 at 02:44
im trying to prevent the whole page from clicking when the item has been clicked once... – user1234 Nov 18 '15 at 02:45

DinoMyte · Answer 2 · 2015-11-18T00:27:26.277

0

To disable the click function of any html element ( button , anchor, checbox etc ), just set onclick = "return false"

<div class="container">
  <a href="#">Link</a>
</div>

$('a').attr("onclick","return false");

edited Nov 18 '15 at 00:27

answered Nov 18 '15 at 00:12

DinoMyte

8,737
1
19
26

How to disable the clicking of any element on the page after a jQuery click

2 Answers2