jquery - 禁用 HTML 链接标签加载

Question

我有一个a我喜欢在站点负载上禁用的按钮，当检查复选框时，a链接将是可单击的。

我在输入类型按钮上试过这个，但问题是输入按钮不适用于我的平滑滚动效果。

谢谢。

Answer 1

这应该很好地工作：

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

<a id="alink" href="javascript:void(0);">Some Link</a>

<br /><br />

<input id="chkid" type="checkbox" value"" name="somename" />

<script type="text/javascript">
$(document).ready(function(){
$('#chkid').unbind("click").click(function(){
var chkid = this.id;
if($(this).is(':checked')){
$("a#alink").attr('href', 'http://www.google.com');
}else{
$("a#alink").attr('href', 'javascript:void(0);');
}
});
});
</script>

Answer 2

CSS：

button.dead {
   background: transparent;
   border: none
}

button.dean a {
   color: #ddd
}

jQuery：

$(function() {

    // toggleWrap() function will call when user change the checkbox
    // wrap -> parameter contain true or false (which is chekcbox status)

    function toggleWrap(wrap) {
        // checking for the condition when checkbox is not checked
        if(!wrap) {
             // wrapping the <a> tag with a button which is 
             // disabled, so it will unclickable
             $('a').wrap($('<button/>', {
                disabled: true,
                'class': 'dead', // this class have some CSS
                 width: $('a').width()  // width of button change to <a> width
            })); 
        } else  {
            // following code will work when checkbox is not checked
            // .unwrap() function will remove the <button> wrapper from <a>
            // and unpack the <a> tag to clickable

            $('a').unwrap();
        }
    }

    $('input:checkbox').on('change', function() {  // bind event to fire when user change the checkbox
        // this.checked hold the checkbox status
        // which is boolean true => if checked or false => if not checked
        toggleWrap(this.checked);
    });
    toggleWrap(false); // this is the initial call to function at page load
});​