JQuery Stopping ladda animation spinning wheel of death

Question

I have a terms & condition checkbox. If it's checked, it submits the form otherwise it throws up an alert. When the alert dialogue box is thrown, the spinning wheel spins for eternity.

I am using the ladda zoom-in gif as listed here: http://lab.hakim.se/ladda/

Before clicking on the button, here's the generated html code:

<button type="submit" id="ladda-purple-step4" class="ladda-button ladda captilize step-4-btn" data-color="purple" data-style="zoom-in">Book appointment now</button>

When spinning begins:

<button type="submit" id="ladda-purple-step4" class="ladda-button ladda captilize step-4-btn" data-color="purple" data-style="zoom-in" disabled data-loading>Book appointment now</button>

For the alert I have:

$('#ladda-purple-step4').unbind('click').click(function (e) {
    if (!document.getElementById('termsagree').checked) {
        e.preventDefault();
        alert("You must accept the Terms & Conditions.");
    }
});

I have managed to stop this on parts of the website using this code:

$('#ladda-purple-step4').on('click', function (e) {
    $('#ladda-purple-step4').attr("disabled", false);
    $('#ladda-purple-step4').removeAttr("data-loading");
});

But it's not working here as this initiates before the spinning begins. My question is, I'm looking for a way to stop the spinning. I was thinking if I can find the attribute data-loading, then fire off my code? What do you recommend? How would I do that?

Thanks

Answer 1

Try using Ladda.stopAll(); See here: https://github.com/hakimel/Ladda