javascript - jQuery - 基于复选框禁用href - 脚本的位置？

Question

不知道我做错了什么，但我是 javascript 和 html 的新手，所以可能很多。我正在尝试根据复选框的选择启用/禁用 href 链接。这是代码：

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

任何帮助是极大的赞赏！

score 4 · Accepted Answer

包含 jQuery 后，我建议使用 DOM 来使脚本更高效：

// 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 小提琴演示。

这将导致您的<head>元素的以下 HTML：

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

或者（尽管您仍然需要包含 jQuery），您可以使用以下方法：

// 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 小提琴演示。

参考：

score 1 · Accepted Answer

将以下行放在您的和标签之间，以便能够使用 jquery：

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

更改您的行：

<script type="jQuery">

至：

<script type="text/javascript">

score -1 · Accepted Answer

jsFiddle example

正如 Tom Gerken 第一个指出的那样，您必须包含 jQuery 库，正如他在回答中所展示的那样。这确实是解决您的问题的关键点，Tom 应该因为正确的解决方案而受到赞誉。

但是，这是启用/禁用链接的另一种方法：

首先将您的 href 设置为"#"，如下所示：

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

你的 jQuery 代码块会这样做：

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

完整代码示例：

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

javascript - jQuery - 基于复选框禁用href - 脚本的位置？

3 回答 3

Related

Reference