Question

我在一个bootstrap popover中有复选框，我用它作为表单的一部分。当用户打开弹出窗口时，我遇到问题，选择一些复选框，关闭弹出窗口，然后重新打开弹出窗口。新打开的弹出窗口不显示用户上次打开弹出窗口时检查的框。我需要用户的选择在popover的启动时保持不变。

我猜这个问题是由于我使用的模板没有任何标记为选中的复选框，所以当我检查弹出窗口中的框时，我试着写一些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');  } 
});

跨越开口的Bootstrap弹出框中的复选框

1 个答案: