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
– Praveen Kumar Purushothaman, Commented Feb 2, 2016 at 14:34
use this plugin and add a change event to the checkbox to add/remove the events. — BenG
– BenG, Commented Feb 2, 2016 at 14:37

Community · Accepted Answer · 2017-05-23 12:07:26Z

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, 2017 at 12:07

CommunityBot

11 silver badge

answered Feb 2, 2016 at 14:43

Ivan Modric

6196 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Stuart Pontins Over a year ago

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?

Ivan Modric Over a year ago

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: <a class="price-link not-active" ...>...</a>)

Stuart Pontins Over a year ago

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 Over a year ago

for example, can I use maybe a span around it and add the class to that instead?

Ivan Modric Over a year ago

Yes, the link would be disabled if the rule were applied to a span surrounding it.

|

Rui · Accepted Answer · 2016-02-02 14:39:07Z

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 2, 2016 at 14:39

Rui

4,9163 gold badges32 silver badges35 bronze badges

3 Comments

Rui Over a year ago

I added the != true on the if just to emphasize that prop returns a boolean

Stuart Pontins Over a year ago

I have just tried this, but the links still click through for me :(

Rui Over a year ago

@StuartPontins Remove the onclick from the link, add the window.open inside the click handler

Ken Palmer · Accepted Answer · 2016-02-02 14:35:22Z

0

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

answered Feb 2, 2016 at 14:35

Ken Palmer

2,4855 gold badges38 silver badges63 bronze badges

Comments

pp_ · Accepted Answer · 2016-02-02 15:27:51Z

0

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>

edited Feb 2, 2016 at 15:27

answered Feb 2, 2016 at 15:09

pp_

3,5134 gold badges21 silver badges27 bronze badges

Collectives™ on Stack Overflow

disabling jQuery OnClick event until checkbox is selected?

4 Answers 4

7 Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related