Question

我似乎在这里遇到了一些麻烦，因为我发现了一些允许我禁用href的东西，但它们被jQuery OnClick覆盖，这意味着它们仍然可以点击？我目前的代码如下所示，但基本上我使用短代码来拉取下面的ahref，我需要禁用所有链接，直到勾选复选框，有人可以帮助我吗？

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类非常重要：< / p>

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

如果您无法在HTML中添加class，则可以使用link围绕span并将该类应用于该版本或应用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();
    }
});

Answer 4

使用规则向您的所有链接添加课程.not-active以禁用它们。然后使用一个简单的.click()函数来测试是否选中了复选框，并相应地删除/添加.not-active类。

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

禁用jQuery OnClick事件，直到选中复选框？

4 个答案: