Bootstrap中的持久复选框在开口中显示 [英] Persist Checkboxes in Bootstrap Popovers Across Openings

问题描述

我在一个引导popover里面有复选框，我使用它作为窗体的一部分。我有一个问题，当用户打开popover，选择一些复选框，关闭popover，然后重新打开popover。新打开的popover不显示用户上次打开popover时检查的框。我需要用户的选择来坚持popover的启动。

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.

我猜这个问题是由于我使用没有任何复选框标记为选择的模板，所以我试图写一些javascript到模板中的复选框我检查我的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.

这是我的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

我也作为一个测试，使用我的模板构造弹出框可见和选中一些框，在弹出框中也会检查这些框，并且它们不是...所以看起来像一个popover不能从模板中获取复选框状态。

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.

推荐答案

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

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

这篇关于Bootstrap中的持久复选框在开口中显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！