Bootstrap 弹出框不保存复选框

Question

我需要在引导程序 3 的弹出框内容上计算 :checked 复选框。

问题是当我更改复选框并关闭弹出框时它没有保存。我尝试重新安装/销毁弹出框并动态更改content 选项，但没有结果。

我还尝试创建空数组并手动计算选中的复选框，push 每次对数组进行新的检查，但再次没有结果，这是非常困难的方式。

js:

$(function () {
    $('.item').popover({
        placement: 'bottom',
        html: true,
        content: function () {
            return $(this).find('.filters').html();
        }
    });

    $('#count').click(function() {
        var filter = $('.item input[type=checkbox]:checked').map(function () {
            return this.value;
        }).get();

        $('#res').text(filter);
    });
});

html:

<div class="item">
    <a href="#" onclick="return false;" class="btn btn-primary">click for popover</a>
    <div class="filters">
        <ul class="list-unstyled">
            <li>
                <input type="checkbox" value="1" checked="checked" id="filter1">
                <label for="filter1">Filter 1</label>
            </li>
            <li>
                <input type="checkbox" value="2" checked="checked" id="filter2">
                <label for="filter2">Filter 2</label>
            </li>
            <li>
                <input type="checkbox" value="3" id="filter3">
                <label for="filter2">Filter 3</label>
            </li>
        </ul>
    </div>
</div>

<br>
<a href="#" onclick="return false;" id="count">count</a>
<div id="res"></div>

css:

.filters {
    display: none;
}
.popover-content {
    width: 100px;
}

更新：http://jsfiddle.net/sirjay/0vetvfpz/

Answer 1

当您创建弹出框时，您复制了 .filters div 的内容，这意味着您拥有它两次。一个被隐藏的，因为它在 .filters div 中，因为它被隐藏了 .filters { display: none; }

并且在您的弹出框中可见。

当您计算时，您实际上计算的是不可见的复选框，而不是弹出框中的复选框。弹出框是在 .item div 之外创建的，因此与 .item input[type=checkbox]:checked 选择器不匹配。将其更改为 .popover input[type=checkbox]:checked 可能会满足您的需求。

更新

我做了一些研究，发现这个用例并不是创造者的想法。所以做起来真的很麻烦。但我已经设法为您找到了解决方案：

$(function () {
    $('.item').popover({
        placement: 'bottom',
        html: true,
        content: function () {
            return $(this).find('.filters').html();
        }
    });

    //Magic
    $(".item").on("shown.bs.popover",function(){
        $(".popover-content input").on("change",function(){
            if(this.checked){
                this.setAttribute("checked","checked");
            }else{
                this.removeAttribute("checked");
            }
            $(".filters").html($(".popover-content").html());
        });
    });


    $('#count').click(function() {
        var filter = $('.item input[type=checkbox]:checked').map(function () {
            return this.value;
        }).get();

        $('#res').text(filter);
    });
});