javascript - JQuery - 单击复选框容器有效，单击复选框无效

Question

我正在尝试创建一个下拉菜单，允许用户通过复选框选择多个选项。我正在使用 jQuery，这样用户只需在复选框容器内单击(即复选框文本或文本周围的空白)即可将复选框标记为已选中或未选中，而无需仅单击复选框:http://jsfiddle.net/nMKt2/

<script type="text/javascript">
            $(document).ready(function () {
                $(".dropdown-menu li").click(function () {
                    var cb = $(this).find('input:checkbox');
                    var chk = cb.prop("checked");
                    if (!chk) {
                        cb.prop("checked", true);
                    }
                    else {
                        cb.removeProp("checked");
                    }
                });
});

这适用于复选框容器，但当您实际单击复选框本身时它会失败!实际上，单击复选框似乎不会触发切换(您可能必须在 IE 或 Firefox 中打开 jsfiddle 才能看到它，因为我的 Chrome 版本无法正确呈现此 jsfiddle)。

我是 jQuery/javascript 的新手，所以我确定我在这里的某个地方犯了一个基本错误。另一个我不知道如何解决的问题是如何使下拉菜单具有“粘性”，以便它不会在您每次选中一个选项时立即消失。

如果您能提供任何帮助，我们将不胜感激。

Answer 1

此处:http://jsfiddle.net/umidbek_karimov/y84ne/

1:将您的input[checkbox] 包装到label 中:

<label><input type="checkbox" value="App1" />App1</label>

2:在点击事件上使用.stopPropagation()方法:

$(document).ready(function () {
    $(".dropdown-menu li label").click(function (ev) {
        ev.stopPropagation();
    });
});

3: 我还在标签上使用了 display: block css 属性

#advanced_options label {
    font-weight:normal !important;
    font-family: Tahoma, Geneva, sans-serif;
    display:block;
    cursor: pointer;
}