CODEWITHSUNDEEP
javascriptjqueryhtmlcheckboxhref
user2989160
user2989160

Reputation: 1

jQuery - Disable href based on checkbox - Location of script?

Not sure what I am doing wrong, but I am very much a novice with javascript and html so probably a lot. I am trying to enable / disable an href link based on the selection of the check box. Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
<meta http-equiv="keywords" content="keyword1, keyword2" />
<meta http-equiv="description" content="Description of Page" />
<link href="css/style.css"rel="stylesheet" type="text/css" />
<style type="text/css">
.auto-style1 {
    font-size: 12px;
    color: #4d4d4d;
    line-height: 2em;
    margin: 5px;
    padding: 0;
    text-align: center;
}
.auto-style2 {
    text-align: center;
}
.auto-style3 {
    font-family: Neogrey;
}
</style>
<script type="jQuery">
$('#link').click(function(){return false; });
$('#check').click(function() {
  if(!$(this).is(':checked')){
    $('#link').bind('click', function(){ return false; });
  }else{
    $('#link').unbind('click');
  }
});</script>

</head>

<body>
<div class="auto-style2">
<form id="form1" runat="server">
<div class="logo"><h1 class="auto-style3">
</h1></div>
<h2 class="head">Header Text</h2>
<div class="auto-style1">
Welcome Text.<br />
<input type="checkbox" id="check"/><label for="check">I accept the <a href="TC.html">Terms of Service</a>.</label>
<br />
<a href="http://www.google.com" id="link">
<img alt="" height="30" src="images/download.png" width="100" /></a><br />

</div>
<div class="footer">
<div class="menu">
<a href="iOS-TC.html">iOS</a>
    <a href="android-TC.html">Android</a>
    <a href="blackberry-TC.html">Blackberry</a>
    <a href="http://www.yahoo.com">Support</a>
</div>
</div>
</form>
    </div>
</body>
</html>

Any help is greatly appreciated!

Upvotes: 0

Views: 1480

Answers (3)

cssyphus
cssyphus

Reputation: 40068

jsFiddle example

As Tom Gerken was the first to point out, you must include the jQuery library as he demonstrated in his answer. This is really the key point in solving your problem and Tom should receive credit for the correct solution.

However, here is another approach for enabling/disabling the link:

Begin with your href set to "#", as in:

<a href="#" id="link">

Your jQuery code block would do this:

$('#check').click(function() {
    if( $(this).is(':checked') ){
        $('#link').attr('href','http://www.google.com');
    }else{
        $('#link').attr('href','#');
    }
});

Full Code Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
<meta http-equiv="keywords" content="keyword1, keyword2" />
<meta http-equiv="description" content="Description of Page" />
<link href="css/style.css"rel="stylesheet" type="text/css" />
<style type="text/css">
    .auto-style1 {
        font-size: 12px;
        color: #4d4d4d;
        line-height: 2em;
        margin: 5px;
        padding: 0;
        text-align: center;
    }
    .auto-style2 {
        text-align: center;
    }
    .auto-style3 {
        font-family: Neogrey;
    }
</style>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

            <style>
            </style>

            <script type="text/javascript">
                $(document).ready(function() {

                    $('#link').click(function(){return false; });

                    $('#check').click(function() {
                        if( $(this).is(':checked') ){
                            $('#link').attr('href','http://www.google.com');
                        }else{
                            $('#link').attr('href','#');
                        }
                    });
                }); //END $(document).ready()

            </script>

</head>

<body>
<div class="auto-style2">
<form id="form1" runat="server">
<div class="logo"><h1 class="auto-style3">
</h1></div>
<h2 class="head">Header Text</h2>
<div class="auto-style1">
Welcome Text.<br />
<input type="checkbox" id="check"/><label for="check">I accept the <a href="TC.html">Terms of Service</a>.</label>
<br />
<a href="#" id="link">
<img alt="" height="30" src="images/download.png" width="100" /></a><br />

</div>
<div class="footer">
<div class="menu">
<a href="iOS-TC.html">iOS</a>
    <a href="android-TC.html">Android</a>
    <a href="blackberry-TC.html">Blackberry</a>
    <a href="http://www.yahoo.com">Support</a>
</div>
</div>
</form>
    </div>
</body>
</html>

Upvotes: -1

David Thomas
David Thomas

Reputation: 253328

Once you've included jQuery, I'd suggest making use of the DOM to make the script a little more efficient:

// bind the click-handler:
$('#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;
    }
});

JS Fiddle demo.

This would lead to the following HTML of your <head> element:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;"/>
<meta http-equiv="keywords" content="keyword1, keyword2" />
<meta http-equiv="description" content="Description of Page" />
<link href="css/style.css"rel="stylesheet" type="text/css" />
<style type="text/css">
/* CSS removed for brevity */
</style>
<!-- note that this must come before the script containing the jQuery code
     which in this case follows immediately -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="jQuery">
$('#link').click(function(e){
    e.preventDefault();
    if (document.getElementById('check').checked){
        window.location = this.href;
    }
});
</script>

</head>

Alternatively (though you still need to include jQuery), you could use the following approach:

// binds a change-handler function to the check-box:
$('#check').change(function () {
    /* adds the 'disabled' class to the '#link' element if
       the '#check' element is _not_ checked, and removes the
       class if the '#check' element _is_ checked: */
    $('#link').toggleClass('disabled', !this.checked);
/* triggers the change event-handler (so the class-name is toggled
   appropriately on page-load: */
}).change();

/* attaches a delegated click-handler to the 'body' element,
   if the click occurs on an 'a' element with the 'disabled'
   class the function is executed:
*/
$('body').on('click', 'a.disabled', function(e){
    // the default behaviour is prevented
    e.preventDefault();
});

JS Fiddle demo.

References:

Upvotes: 4

Tom G
Tom G

Reputation: 3660

Put the following line in between your and tags to be able to use jquery:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>

Change your line that says:

<script type="jQuery">

To:

<script type="text/javascript">

Upvotes: 1

Related Questions