javascript - 在开口处保留 Bootstrap Popovers 中的复选框

Question

我在用作表单一部分的 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

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

Answer 1

更新原始元素的选中属性。检查复选框是否已被选中，并按以下代码应用操作。请参阅此工作 jsFiddle

$(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');  } 
});