Persist Checkboxes in Bootstrap Popovers Across Openings

Question

I have checkboxes inside of a bootstrap popover that I use as part of a form. I am having an issue when users open the popover, select some checkboxes, close the popover, and then reopen the popover. The newly opened popover does not show the boxes that the user checked the last time he/she opened the popover. I need the user's selections to persist across launches of the popover.

I guessed that this problem was due to the template I am using not having any checkboxes marked as selected, so I tried to write some javascript to check boxes in the template when I check the boxes in my popover, but this is not working.

Here is my 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>

Here is a jsFiddle

I also, as a test, made the template I use to construct the popover visible and checked some boxes on it to see if the boxes would be checked in the popover as well, and they were not... so it seems like a popover cannot get checkbox state from a template.

Answer 1

Update original element checked property. Check if checkbox is already checked or not and apply action as below code. Refer this working 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');  } 
});