Question

问题是选项卡面板选项卡内的复选框不会检查。

<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>

有什么想法吗？如何使这些复选框执行检查和取消选中功能？

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');

});

DEMO

Answer 2

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

Bootstrap CheckBox进入TabPanel选项卡不检查/取消选中

2 个答案: