Question

我有这样的事情：

http://jsfiddle.net/D2RLR/5649/

它可以在bootstrap的下拉菜单中检查复选框。但问题是这段代码：

<a href="#">
    <input type="checkbox">
    <span class="lbl"> Every day</span>
</a>

如果有人点击标签中的文字（＆＃39;每天＆＃39;），将导致页面重新加载。

我不想要重新加载行为。我试图将锚更改为span标记，但它失去了onhover的样式，突出显示整行。还尝试取出＆＃39;＃＆＃39;从锚点开始，简单地做到：

<a href=''>

但是复选框似乎无法响应点击次数。

有没有人对此有任何好的解决方案？

Answer 1

向dropdown-menu添加课程dropdown-with-checkbox（或其他更符合资格的班级名称）

然后添加以下脚本：

$(function(){
    $('.dropdown-with-checkbox a').click(function(e) {
        // ?: Are we clicking a checkbox inside the a-tag?
        if(e.target.type === 'checkbox') {
            // Yes, but we do not want to prevent the default checkbox behaviour
            return;
        }
        // Do not reload the page when clicking the a tag
        e.preventDefault();
    }) 
});

旁注1：

在点击处理程序中添加e.stopPropagation();可以防止点击次数升级到＆＃39;下拉列表＆＃39;处理程序，关闭点击下拉列表。

旁注2：

您还应该按照以下方式构建复选框：

<label>
   <input type="checkbox"> Label
</label>

这样，点击标签将切换复选框。

Answer 2

你也可以使用span方法创建一个css类，它可以改变鼠标上的光标。

.pointer {
    cursor: pointer;
}

这样你就可以让鼠标停留在效果上，但不必担心它会在某处链接或重新加载页面。

Bootstrap：下拉复选框锚点标记，无需重新加载页面

2 个答案:

旁注1：

旁注2：