Disable entire DIV tag and everything inside after button onclick event

Question

I have an HTML markup like following:

<div id="picing-selection" class="disableMe">
    <a class="upgradeSub" value="@ViewBag.Id">
        Upgrade <i class="fa fa-money"></i>
    </a>
</div>

And the onclick event defined looks like following:

$(document).on("click", ".upgradeSub", function() {
    $.post("/Subscription/UpgradeSubscription", {
        SubID: $(this).attr("value") 
    }).done(function(data) {
        if (data == "Ok") {
            $(this).prop('disabled', false);
            window.location.href = "/Index/Success";
        } else if (data == "Error") {
            alert("Something went wrong");
        }
    });
});

I want to disable any future onclick event until the server responds with status "ok" or "Error"

I've tried something like:

$(document).on("click", ".upgradeSub", function() {
    $(this).prop('disabled', true);
    // After this goes the post to server
});

But this didn't work... I can still keep clicking and the jquery will keep posting requests to the server...

`disable any future onclick` Disable all clicks that would otherwise trigger that one handler, or disable every `onclick` you've added to the page? — CertainPerformance, Aug 16 '18 at 08:28
You can't disable a div. You could set some data-* attribute and toggle it on click and server response then check that before proceeding with your function — lucas, Aug 16 '18 at 08:31
Possible duplicate of [how to disable DIV element and everything inside](https://stackoverflow.com/questions/15555295/how-to-disable-div-element-and-everything-inside) — Simon Jensen, Aug 16 '18 at 08:32
You should take a look at jQuery's `.one()` or `.on()` in combination with `.off()` method. The jQuery docs can explain far more accurately than any answer here. — Roko C. Buljan, Aug 16 '18 at 08:49

score 2 · Answer 1 · answered Aug 16 '18 at 08:30

2

disable attribute does not work on div.

A workaround can be to add a disable class on the div whenever you want to disable it and on the click listener first check if the div does not have the disabled class to execute the further code.

answered Aug 16 '18 at 08:30

void

36,090
8
62
107

score 2 · Answer 2 · answered Aug 16 '18 at 08:32

you can disable all children in same click handler and then enable it once post call complete

$(document).on("click", ".upgradeSub", function ()
        {
           var $this = $(this);
           $this.children().prop('disabled',true); // disable all
            $.post("/Subscription/UpgradeSubscription", { SubID: $(this).attr("value") }).done(function (data)
            {
                $this.children().prop('disabled',false); // enable all
                if (data == "Ok") {
                    $(this).prop('disabled', false);
                    window.location.href = "/Index/Success";
                }
                else if (data == "Error") {
                    alert("Something went wrong");
                }
            });
        });

Anamnian · Answer 3 · 2018-08-16T09:35:50.787

$(document).on("click", ".upgradeSub", function() {
  if($(this).data('isWaiting'))
    return;
  $(this).data('isWaiting', true);
  $.post("/Subscription/UpgradeSubscription", {
    SubID: $(this).attr("value")
  }).done(function(data) {
    if (data == "Ok") {
      $(this).data('isWaiting', false);
      window.location.href = "/Index/Success";
    } else if (data == "Error") {
      alert("Something went wrong");
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="picing-selection" class="disableMe">
  <a class="upgradeSub" value="@ViewBag.Id">
        Upgrade <i class="fa fa-money"></i>
    </a>
</div>

Clearly speaking, no need call $(this).data('isWaiting', false);, because window.location redirect user to another page, and this call become useless (we won't click on this element anymore).

Zakaria Acharki · Answer 4 · 2018-08-16T10:25:12.160

You can't use disabled on an anchor instead you could play with classes using addClass()/removeClass(), like:

$(document).on("click", ".upgradeSub", function() {
  var _this = $(this);
  _this.removeClass('upgradeSub');

  $.post("/Subscription/UpgradeSubscription", {
    SubID: $(this).attr("value")
  }).done(function(data) {
    if (data == "Ok") {
      window.location.href = "/Index/Success";
    } else if (data == "Error") {
      alert("Something went wrong");
    }

      _this.addClass('upgradeSub');
  });
});

Working Sample:

$(document).on("click", ".upgradeSub", function() {
  console.log('Clicked.');

  var _this = $(this);
  _this.removeClass('upgradeSub');

  console.log("Disabled (Try to click now)");

  setTimeout(function() {
    console.log('Enabled again.');
    _this.addClass('upgradeSub');
  }, 3000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="picing-selection" class="disableMe">
  <a class="upgradeSub" value="@ViewBag.Id">Click Me</a>
</div>

This one doesn't looks good if you have any `css-styles` on `upgradeSub` class. — Anamnian, Aug 16 '18 at 09:26

score 1 · Answer 5 · answered Aug 16 '18 at 08:37

1

You can use CSS pointer-events -

$('#picing-selection').css('pointer-events', 'none');

answered Aug 16 '18 at 08:37

Programmer

1,973
1
12
20

score 0 · Answer 6 · answered Aug 16 '18 at 08:45

var access = 1;
$(document).on("click", ".upgradeSub", function () {
   if(access){
    access--;
    $.post("/Subscription/UpgradeSubscription", {SubID: $(this).attr("value")}).done(function (data) {
        access++;
        if (data == "Ok") {

            $(this).prop('disabled', false);
            window.location.href = "/Index/Success";
        }
        else if (data == "Error") {
            alert("Something went wrong");
        }
    });
}

})

Disable entire DIV tag and everything inside after button onclick event

6 Answers6