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

Question

is there anyway to make an anchor tag clickable if a checkbox is checked and visa versa (anchor tag not clickable if a checkbox is not checked)?

reason i am asking for this is because i am working on a custom mouthguard site and my client wants the visitor to click a checkbox (which means they agree to the terms) before being able to add the mouthguard to the cart and proceed to checkout.

right now i have an anchor tag around an image tag (due to signing a non-disclosure agreement, i can not display any code, but i will display the set up):

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

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

please let me know how i can accomplish my goal. thanks.

Answer 1

In the onclick for an anchor, you can return false if the checkbox is not checked, or return true if the checkbox is checked. This will mean the link will be followed when the checkbox is checked.

<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

You have to add this to the code:

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

Then inside checkInput , just check for the state of the checkbox.

If it is checked, then use

document.location = "Add to Cart Location";

Alternatively: you can use this:

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

Answer 3

Say you had this wrapped in a div you could so something like this:

<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>

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