disabling jQuery OnClick event until checkbox is selected?

Question

I seem to be having some trouble here, as I have found something that allows me to disable hrefs, but they are overriden by jQuery OnClick, meaning they are still clickable? The code I have currently is as follows below, but basically I'm using a shortcode to pull the ahref below, and I need to disable all of the links until a checkbox is ticked, can anybody help me out here?

ahref

<a class="price_link" href="javascript:void();" onclick="window.open('https://bookings.pontins.com/sraep/www700.pgm?LINKID=700&amp;aid=&amp;offer=DSTC&amp;url=https://bookings.pontins.com/sraep/&amp;cater=SC&amp;centre=BRE&amp;Nights=3&amp;startdate=12022016&amp;apartment=Popular','Book','location=no,scrollbars=yes,width=750,height=900')">£60</a>

jQuery

// bind the click-handler:
$(".price_link").click(function(e){
    // prevent the default action of clicking on a link:
    e.preventDefault();
    // if the element with id 'check' is checked:
    if (document.getElementById('check').checked){
        // change the window.location to the 'href' of the clicked-link:
        window.location = this.href;
    }
});

Answer 1

Here is the answer to a similar question: Disable link using css

To summarize:

You could have a CSS rule

 .not-active {
   pointer-events: none;
   cursor: default;
}

and add the class .not-active to the proper links in your HTML. Then you could listen for change on your checkbox (it is important to not toggle but add or remove the class since some browsers cache inputs):

$('#yourCheckboxId').on('change', function () {
    if ($(this).prop('checked') === true) {
        $('.price-link').removeClass('not-active');
    } else {
        $('.price-link').addClass('not-active');
    }
});

If you can't add the class in you HTML you could either surround the link with a span and apply the class to that or apply the class to the link on page-load:

$(function() {
    $('.price-link').addClass('not-active');
});