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;
    }
});

Can you try this: `$(".price_link").off("click").click(function(e){` or `$(".price_link").removeAttr("onclick").click(function(e){` — Praveen Kumar Purushothaman, Feb 02 '16 at 14:34
use [this](http://stackoverflow.com/questions/33369265/jquery-disable-click-event/33371327#33371327) plugin and add a change event to the checkbox to add/remove the events. — BenG, Feb 02 '16 at 14:37

score 3 · Accepted Answer · edited May 23 '17 at 12:07

3

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');
});

edited May 23 '17 at 12:07

Community

1
1

answered Feb 02 '16 at 14:43

Ivan Modric

609
6
14

Thank you! I have just tried this, and it works other than I have to tick the box to disable them, how can I flip it around? – Stuart Pontins Feb 02 '16 at 15:05
Happy to help :) - In your HTML you have to add the class `not-active` to all **links** with the class `price-link`. (So it might look something like this: `...`) – Ivan Modric Feb 02 '16 at 15:08
Ah, I see what you're saying - can I wrap this around there by any chance? As we can't add classes directly to the shortcode which looks like [pricex oc="DSTC" y="2016" m="02" d="15" pk="Brean Sands" nts="4" cat="SC"]? – Stuart Pontins Feb 02 '16 at 15:14
for example, can I use maybe a span around it and add the class to that instead? – Stuart Pontins Feb 02 '16 at 15:17
Yes, the `link` would be disabled if the rule were applied to a `span` surrounding it. – Ivan Modric Feb 02 '16 at 15:22
Or you could apply the `class` to the `link` on page-load via JS. – Ivan Modric Feb 02 '16 at 15:22
I just remembered that Firefox caches `input`s - therefore the `class` should be `add`ed or `remove`d and not `toggle`d. – Ivan Modric Feb 02 '16 at 15:35

score 1 · Answer 2 · answered Feb 02 '16 at 14:39

1

Test if your checkbox is checked ($('#checkbox').prop("checked")) and react accordingly:

$('.price_link').click(function(){
  if ($('#yourCheckboxId').prop("checked") != true)
    return; //do nothing if your checkbox isn't chekced

  //do what you want to do if your checkbox is checked here
});

answered Feb 02 '16 at 14:39

Rui

4,847
3
29
35

I added the `!= true` on the if just to emphasize that prop returns a boolean – Rui Feb 02 '16 at 14:41
I have just tried this, but the links still click through for me :( – Stuart Pontins Feb 02 '16 at 14:55
@StuartPontins Remove the onclick from the link, add the window.open inside the click handler – Rui Feb 02 '16 at 16:09

score 0 · Answer 3 · answered Feb 02 '16 at 14:35

What about this?

$(".price_link").click(function(e){
    if (document.getElementById('check').checked){
        window.location = this.href;
    } else {
        e.preventDefault();
    }
});

or this?

$(".price_link").click(function(e){
    if (!document.getElementById('check').checked){
        e.preventDefault();
    }
});

pp_ · Answer 4 · 2016-02-02T15:27:51.990

Add a class .not-active to all your links with rules to disable them. Then use a simple .click() function that tests if your checkbox is checked and removes/adds the .not-active class accordingly.

$('#checkboxId').click(function() {
  if ($('#checkboxId').prop('checked') == true) {
    $('.price_link').removeClass('not-active');
  } else {
    $('.price_link').addClass('not-active');
  }
});

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

<p><input type="checkbox" id="checkboxId">Activate all links?</p>

<a href="#" class="price_link not-active">Link 1</a><br>
<a href="#" class="price_link not-active">Link 2</a>

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

disabling jQuery OnClick event until checkbox is selected?

4 Answers4