Question

我有一个问题，我有以下标记：

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

-- See Example --

但是，单击标签时，复选框选中状态不会更改。

我知道我可以破解代码并尝试通过添加代码来设置检查状态来模拟本机浏览器功能，但是我更喜欢使用本机功能而不是模拟它。 / p>

如何在不关注链接的情况下更改状态，并且不使用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

防止嵌套标签链接跟随，但更改复选框状态

1 个答案: