CODEWITHSUNDEEP
javascripthtmlcheckboxhyperlink
user2325103
user2325103

Reputation: 9

Only allow a link to be clickable if checkbox is selected

I'm trying to setup a button/link that is only clickable if a checkbox is selected. So my code so far would be 

<form>
<input type="checkbox" name="agreeCheckbox" value="agreeCheckbox">By clicking this you agree that you are adding a subscription/recurring product to your order<br>
</form>

<a href="exmaple.com">This link is only clickable if checkbox is checked</a>

I'm assuming I will have to do this in javascript although I'm on a beginner when it comes to javascript. Thanks

Upvotes: 1

Views: 9055

Answers (4)

Alex Kalicki
Alex Kalicki

Reputation: 1533

Here's a simple way of doing it using pure javascript, using some ID attributes I added as hooks for the javascript document.getElementById() function.

HTML:

<form>
    <p><input type="checkbox" id="agreeCheckbox" name="agreeCheckbox" value="agreeCheckbox" onchange="toggleLink(this);">By clicking this you agree that you are adding a subscription/recurring product to your order</p>
</form>

<p><a href="exmaple.com" id="agreeLink" style="display:none;">This link is only clickable if checkbox is checked</a></p>

Javascript:

function toggleLink(checkBox)
{
    var link = document.getElementById("agreeLink");

    if (checkBox.checked)
        link.style.display = "inline";
    else
        link.style.display = "none";
}

WORKING EXAMPLE

Upvotes: 2

Alec Bennett
Alec Bennett

Reputation: 5887

There are a variety of ways you could accomplish this. Most of the newer methods would probably involve jQuery.

First, include jQuery (Google works):

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

Then, make the link, not a link:

<div id="mylink">This link is only clickable if checkbox is checked</div>

Next, if the box is clicked, make it clickable:

<script type="text/javascript">
$("input[name = 'agreeCheckbox']").click(function(){
  $("#mylink").html('<a href="exmaple.com">This link is only clickable if checkbox is checked</a>');
});
</script>

Upvotes: 0

Kevin Bowersox
Kevin Bowersox

Reputation: 94469

This code adds some id attributes to the elements to provide some hooks for the Javascript. It hides and prevents the default action of the anchor until the checkbox is clicked.

HTML

<form>
<input id="agreement" type="checkbox" name="agreeCheckbox" value="agreeCheckbox">By clicking this you agree that you are adding a subscription/recurring product to your order<br>
</form>

<a href="exmaple.com" id="link">This link is only clickable if checkbox is checked</a>

Javascript

var chk = document.getElementById("agreement");
var anchor = document.getElementById("link");
anchor.style.display = "none";
anchor.onclick = function(e){
  e.preventDefault();
}

chk.onclick = function(){
    if(chk.checked){
        anchor.style.display = "inline";
      anchor.onclick = "";
    }
}

Working Example

http://jsfiddle.net/zVCD7/

Upvotes: 2

웃웃웃웃웃
웃웃웃웃웃

Reputation: 11984

<input type="checkbox" name="agreeCheckbox" id="agreeCheckbox" value="agreeCheckbox">By clicking this you agree that you are adding a subscription/recurring product to your order<br>

<div id="mycheck">
<a href="exmaple.com">This link is only clickable if checkbox is checked</a>
</div>


var check= document.getElementById('agreeCheckbox');
  if (check.checked){
    document.getElementById('mycheck').style.display='block';
  }
else{
 document.getElementById('mycheck').style.display='none';
}

Upvotes: 0

Related Questions