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

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

本文关键字：href 脚本 位置 复选框 jQuery      更新时间：2023-09-26

不知道我做错了什么，但我是一个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>

任何帮助将不胜感激！

一旦你包含了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小提琴演示。

引用：

  • change() .
  • click() .
  • document.getElementById() .
  • event.preventDefault() .
  • on() .
  • toggleClass() .
  • window.location .

在 和 标签之间放置以下行以便能够使用 jquery：

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

更改您的行，内容如下：

<script type="jQuery">

自：

<script type="text/javascript">

jsFiddle 示例

正如 Tom Gerken 是第一个指出的那样，你必须包括 jQuery 库，正如他在回答中演示的那样。这确实是解决问题的关键点，汤姆应该因正确的解决方案而获得荣誉。

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

首先将 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>
相关文章：