在选中复选框之前禁用jQuery OnClick事件？

Question

我在这里似乎遇到了一些麻烦，因为我发现了一些允许我禁用hrefs的东西，但是它们被jQuery OnClick覆盖了，这意味着它们仍然是可点击的？我目前拥有的代码如下所示，但基本上我使用的是一个短代码来拉下面的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

下面是一个类似问题的答案：Disable link using css

概括地说：

你可以有个CSS规则

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

并将类.not-active添加到HTML中的适当links中。然后您可以在您的change上侦听checkbox (重要的不是toggle，而是add或remove类，因为有些浏览器缓存输入)：

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

如果无法在HTML中添加class，则可以用span包围link并将类应用于此，也可以在页面加载时将class应用于link：

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

Answer 2

测试是否选中了复选框($('#checkbox').prop("checked"))并作出相应反应：

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

Answer 3

那这个呢？

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

还是这个？

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