HTMLリンクタグオンロードを無効にする

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