在跨开口的 Bootstrap 弹出窗口中保留复选框

我在引导弹出窗口内有复选框，我将其用作表单的一部分。当用户打开弹出窗口、选择一些复选框、关闭弹出窗口，然后重新打开弹出窗口时，我遇到问题。新打开的弹出窗口不会显示用户上次打开弹出窗口时选中的框。我需要用户的选择在弹出窗口启动时保持不变。

我猜想这个问题是由于我使用的模板没有任何复选框标记为选中，所以当我选中弹出窗口中的框时，我尝试编写一些 javascript 来检查模板中的复选框，但这不起作用。

这是我的 HTML：

<form>
    <div id='filters-container' style='display: none;'>
       <div id="div_id_filters" class="form-group">
          <label for="id_filters_0" class="control-label">Filter</label>
          <div class="controls ">
              <div class="checkbox"><label><input type="checkbox" name="filter" id="id_filter_1" class="filter filters_1" value="Filter1">Filter1</label></div>
              <div class="checkbox"><label><input type="checkbox" name="filter" id="id_filter_2" class="filter filters_2" value="Filter2">Filter2</label></div>
              <div class="checkbox"><label><input type="checkbox" name="filter" id="id_filter_3" class="filter filters_3" value="Filter3">Filter3</label></div>
              <!-- etc etc more filters -->
               </div>
            </div>
          </div>
          <button id='filter-btn' data-contentwrapper='#filters-container' class='btn' rel="popover" type="button">Filter</button>
          <input class='btn' type="submit" value="Search">
</form>


<script>
// Open the popover
$('[rel=popover]').popover({
    html:true,
    placement:'bottom',
    content:function(){
        return $($(this).data('contentwrapper')).html();
    }
});

// Close popover on click on page body outside popover
$('body').on('click', function (e) {
    $('[rel="popover"]').each(function () {
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
     });
 });

// My attempt to persist changes by modifying all occurrences of a changed checkbox class
// So that the next time the popover is created, the template will be the same 
// as the previously opened popover
// NOT WORKING
$(document).on("change",".filters",function(){
    // Make a selector to get both the popover and the template instances of the checkbox
    var selector = '.' + $(this).attr('class');
    // Set both equal to the recently changed box
    var isChecked = $(this).checked;
    $(selector).prop('checked', isChecked);
});
</script>

这里有一个jsFiddle http://jsfiddle.net/prn8kzkd/

作为测试，我还使用于构造弹出窗口的模板可见，并选中了它上面的一些框，看看这些框是否也会在弹出窗口中选中，但它们没有......所以它看起来像一个弹出窗口无法从模板获取复选框状态。

更新原始元素检查属性。检查复选框是否已选中，并按以下代码应用操作。参考这个工作jsFiddle http://jsfiddle.net/prn8kzkd/2/

$(document).on("change",".filter",function(){            
    // Get id of checkbox clicked.
    var itemIndex = $(this).attr("id").split("_")[2]; 

    // find original element
    var orig = $('#filters-container').find('.filter:eq(' + (itemIndex  - 1)+ ')');

    // add or remove checked property to the original content accordingly.
    if($(this).is(":checked")) {orig.attr('checked','checked');}
    else{orig.removeAttr('checked');  } 
});