2012-06-15 36 views
0

我有文章元素內的鏈接。點擊元素時,複選框會實現檢查屬性。但是這個元素內的鏈接是無效的。點擊此元素時,如何使元素中的鏈接可用來檢查複選框?

我該如何改進此腳本以使鏈接可用?

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

,這樣的複選框改變你爲什麼要建立這個點擊功能當你點擊整個區域包括鏈接?爲什麼不簡單地將您的處理程序附加到不包含鏈接的區域(或使用'label')? –

+0

你的問題有點不清楚。 你想勾選複選框時啓用鏈接嗎?如果是的哪個鏈接? 您是否希望在點擊「Yo」時檢查複選框?或者即使有人點擊「編輯帖子」鏈接複選框應該被選中? 請確定。 – Dharmavir

+0

不,我需要整個區域才能檢查ckeckbox。但內部的鏈接必須是可行的。謝謝 –

回答

1

您的鏈接被禁用,因爲您在最後返回false。在鏈接標籤上捕獲點擊事件後返回false會阻止鏈接執行。

+0

我是否也可以將它作爲單擊鏈接時不檢查的複選框? :)謝謝 –

+0

那麼,如果你不想檢查它,那有什麼意義呢?那是不是一個完全正常的複選框? –

0

this fiddle我只是刪除了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個操作。我真的想要你,當然可以不回覆錯誤,但這對用戶來說太糟糕了。

+0

不幸的是,我不能使用標籤作爲帖子的主體。 –

+0

然後,您可以將處理程序掛接到帖子主體。 –