次のマークアップがあるという問題があります。
<input type="checkbox" id="foo" />
<label for="foo">
<a href="http://www.google.com">
Checkbox text
</a>
</label>
ユーザーが JavaScript を有効にしていない場合に備えて、ラベルにはネストされたアンカーがあり、その場合、ユーザーはラベルをクリックするとリンクをたどります。
リンクのクリックを防ぎ、チェックボックスの状態が変更されたときにアラートを表示するために、次のjavascript/jQueryがあります。
$(function(){
$("label a").click(function(e){
e.preventDefault();
});
$("#foo").change(function(){
alert("checkbox changed");
});
});
ただし、ラベルをクリックしても、チェックボックスのチェック状態は変更されません。
コードをハックして、コードを追加してチェック済みステータスを設定することで、ネイティブ ブラウザー機能をエミュレートできることは承知していますが、エミュレートするよりもネイティブ機能を使用することをお勧めします。
リンクをたどらず、JavaScriptを使用してチェック状態を設定せずに、チェックボックスの状態を変更するにはどうすればよいですか?