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

Question

我在这里似乎遇到了一些麻烦，因为我发现了一些允许我禁用 href 的东西，但是它们被 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。然后你可以在你的 checkbox 上监听 change (重要的是不要 toggle 而是 add 或 删除类，因为一些浏览器缓存输入):

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