防止嵌套的標籤鏈接，但變化選擇框狀態

Question

我有一個問題，我有以下標記：

<input type="checkbox" id="foo" /> 
<label for="foo"> 
    <a href="http://www.google.com"> 
     Checkbox text 
    </a> 
</label> 

的標籤已經萬一嵌套錨用戶沒有啓用javascript，和在這種情況下，他們將在點擊標籤時跟隨鏈接。

我有以下的javascript/jQuery來防止鏈接點擊，並顯示出當複選框狀態改變警報：點擊複選框選中狀態ISN的標籤時

$(function(){ 
    $("label a").click(function(e){ 
     e.preventDefault(); 
    }); 
    $("#foo").change(function(){ 
     alert("checkbox changed"); 
    }); 
}); 

-- See Example --

然而沒有改變。

我知道我可以黑客的代碼，並試圖通過添加代碼來設置檢查狀態來模擬本地瀏覽器功能，但是我寧願使用本地功能而不是模擬它。

我怎樣才能得到複選框來改變狀態，而沒有按照鏈接，並沒有設置使用JavaScript的選中狀態？

Answer 1

有點糊塗這裏and without setting the checked state using javascript? ... 但我認爲你是在談論trigger() ...

$("label a").click(function(e){ 
    var $foo = $("#foo"); 
    $foo.attr("checked", !$foo.attr("checked")); 
    $foo.trigger('change'); 
    return false; 
}); 

fiddle