jquery - この要素をクリックしてチェックボックスをオンにしたときに、要素内のリンクを利用可能にする方法は?

Question

article 要素内にリンクがあります。要素をクリックすると、チェックボックスがchecked属性になります。ただし、この要素内のリンクは無効です。

このスクリプトを改善してリンクを利用できるようにするにはどうすればよいですか?

http://jsfiddle.net/57GsC/

<article class="post short-post">
   <header><h3 class="post_title"><a href="/posts/2">Yo</a></h3></header>
    <input type="checkbox" value="" name="post_check" class="post-check center-align">
    <div class="post-body">Mauris nec nisl justo. Suspendisse quis metus venenatis turpis feugiat euismod ac semper arcu. Vestibulum </div>
    <footer>
        <div class="links">
         <a class="edit button" href="/posts/2/edit">Edit Post</a>
         <a rel="nofollow" data-method="delete" class="delete button" href="/posts/2">Delete a Post</a>
         <a class="view button" href="/posts/2">View</a>
        </div>
    </footer>
</article>

$(".short-post").click(function(evt) {
  var $checkbox;
  if (evt.target.type !== "checkbox") {
    $checkbox = $(":checkbox", this);
    $checkbox.attr("checked", !$checkbox.attr("checked"));
    evt.stopPropagation();
    return false;
  }
});

Answer 1

最後に false を返すため、リンクは無効になります。リンク タグでクリック イベントをキャッチした後に false を返すと、リンクの実行が停止します。

Answer 2

このフィドルでは、jquery コードを削除し、label意図したこと (およびおそらくユーザーが期待すること) を行うように見える標準要素を使用しました。

<input id=someId type="checkbox" value="" name="post_check" class="post-check center-align">
<label for=someId>Mauris nec nisl justo. Suspendisse quis metus venenatis turpis feugiat euismod ac semper arcu. Vestibulum </label>

ここでは、単純なクリック (チェックボックスを変更してリンクをたどる) で 2 つのアクションを実行したくないと想定しています。もちろん、単にfalseを返さないこともできますが、それはユーザーにとってひどいことです。

Answer 3

return false;ステートメントを削除します