将Bootstrap复选框嵌入到选项卡面板中，无法勾选/取消勾选。

Question

问题在于标签页中的复选框无法被选中。 JSFiddle链接

以下是HTML代码：

<ul class="nav nav-tabs" id="myTab">
    <li class="active">
        <a href="#home">
            <div style="margin: 0;" class="checkbox">
                <label style="float: left;">
                    <input style="display: inline-block;" type="checkbox" id="product" value="home" />
                    <div style="display: inline-block;">Home</div>
                </label>
            </div>
        </a>
    </li>
    <li>
        <a href="#profiles">
            <div style="margin: 0;" class="checkbox">
                <label style="float: left;">
                    <input style="display: inline-block;" type="checkbox" id="product" value="profiles" />
                    <div style="display: inline-block;">Profiles</div>
                </label>
            </div>
        </a>
    </li>
    <li>
        <a href="#messages">
            <div style="margin: 0;" class="checkbox">
                <label style="float: left;">
                    <input style="display: inline-block;" type="checkbox" id="product" value="messages" />
                    <div style="display: inline-block;">Messages</div>
                </label>
            </div>
        </a>
    </li>
</ul>

有什么想法吗？我该如何让这些复选框实现勾选和取消勾选的功能？

- Toms Bugna

---

为什么每个复选框都有相同的ID？ - Amit Kumar

因为这只是一个例子。将ID更改为唯一并不能给我所需的结果。 - Toms Bugna

Bunga：请检查我的答案。 是的，ID 应该是唯一的。 - Amit Kumar

Answer 1

你的jquery将会是：

$('#myTab li').click(function (e) {
 // e.preventDefault();
    $(this).find('a').tab('show');
 // $(this).tab('show');
     $(this).closest('ul').find('input[type="checkbox"]').prop('checked','');
     $(this).closest('li').find('input[type="checkbox"]').prop('checked','checked');

});

演示

- Amit Kumar

---

注意到Chrome中的一个错误，在初始化后，当直接点击复选框时，您可以在选项卡之间切换，但复选框不会变为活动状态。当第一次单击选项卡标题而不是复选框以在选项卡之间切换时，问题得到解决。 - ins0

@toms：这是因为我将此代码编写在锚点"<a>"的单击事件上。如果您想要在复选框上使用它，那么您可以这样做。 等一下，我会更新我的答案。 - Amit Kumar

Answer 2

您正在阻止它的点击。删除e.preventDefault()将解决问题。

- hrskrs

---

仅移除该行代码，不会在您切换到其他选项卡时取消选中复选框。 - Amit Kumar