选中复选框时使锚定标记可单击

Question

如果复选框被选中，是否有办法使锚定标签可点击，反之亦然(如果复选框未选中，则锚定标签不可点击)？

我这样问的原因是因为我在一个自定义的护口器网站上工作，我的客户希望访问者在能够将护口器添加到购物车并继续结帐之前单击一个复选框(这意味着他们同意这些条款)。

现在我在图片标签周围有一个锚标签(由于签署了保密协议，我不能显示任何代码，但我将显示设置)：

<input type="checkbox" name ="" id="" />

<a href="" target="" class="" onClick=""><img src="" border="" alt="" /></a>

请告诉我如何才能实现我的目标。谢谢。

Answer 1

在锚点的onclick中，如果未选中复选框，则可以返回false；如果选中复选框，则可以返回true。这意味着当复选框被选中时，该链接将被跟踪。

<input type="checkbox" name ="" id="terms" />
<a href="http://google.com" target="" class="" onClick="return checkTerms();"><img src="" border="" alt="" /></a>

<script>
function checkTerms()
{
    var ticked = document.getElementById("terms").checked;

    if(!ticked) alert("Please accept the terms");

    return ticked;
}
</script>

Answer 2

您必须将以下代码添加到代码中：

<a href="" target="" class="" onClick="checkInput(); return false;"><img src="" border="" alt="" /></a>

然后在checkInput中，只需检查复选框的状态。

如果选中，则使用

document.location = "Add to Cart Location";

或者:您可以使用以下命令：

document.getElementById("myCheckBox").addEventListener ("change", function() {
    if(this.checked) {
        document.getElementById("myLink").href = "Proper HREF";
    } else {
        document.getElementById("myLink").href = "#";
    }
}

Answer 3

假设你把它包装在一个div中，你可以这样做：

<div class="login">
 <span>I have read and agree to the terms and conditions. <input type="checkbox" name ="" id="" /></span>
 <a href="" target="" class="" onClick=""><img src="" border="" alt="" /></a>
</div>

然后在你的JavaScript中。

$('.login a').click(function(ev) {
   var $checkbox = $('.login input');

   if ( $checkbox.is(':checked') ) {
     console.log('GO AHEAD');
   } else {
     alert('You need to accept the terms and conditions before proceeding');
     $checkbox.addClass('error');
     ev.preventDefault();
   } 
});