Question

我有一个a按钮，我希望在网站加载时禁用该按钮，当选中复选框时，a链接将是可点击的。

我在输入类型按钮上尝试了这个但问题是输入按钮不能用我的smoothscroll效果。

感谢。

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
});

禁用HTML链接标记onload

2 个答案: