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