使用窗體彈出窗口中的重複輸入ID問題

Question

我目前使用Bootstrap 3並在彈出窗口中加載過濾器窗體。 爲了創建一個基於CSS的複選框效果，HTML需要以特定的方式構造（如在jsfiddle示例中）

我從包含窗體的隱藏div抓取HTML並加載它裏面的popover。表單計入標籤特性，當從標籤引用=「」屬性時，允許輸入某個id。

但由於popover允許原始html存在，所以存在重複的ID問題。因此，即使點擊標籤，複選框也不會被檢查。

任何建議你有這個疑難解答，將不勝感激。謝謝！

$.noConflict(); 
 

 
function filterToggle (title, toggle, html) { 
 
    toggle.popover({ 
 
    html: true, 
 
    placement: "auto", 
 
    content: function() { 
 
     return html.html(); 
 
    }, 
 
    title: title+'<button type="button" id="close" class="close"></button>', 
 
    template: '<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-title"></div><div class="popover-content"></div></div>' 
 
    }); 
 
}; 
 
jQuery(document).ready(function($) { 
 
    filterToggle(
 
    'Filter Title', 
 
    $('#popover-toggle'), 
 
    $('#popover-content-html') 
 
); 
 
});

.popover { max-width:500px; } 
 
.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] { margin-left:0; } 
 

 
div.checkbox label:before { 
 
    border-radius: 4px; 
 
} 
 
div.checkbox input:checked + label:before { 
 
    border-color: green; 
 
    background: green; 
 
    color: #fff; 
 
    line-height: 16px; 
 
} 
 

 
div.checkbox { 
 
    position: relative; 
 
} 
 
div.checkbox label { 
 
    padding-left: 30px; 
 
} 
 
div.checkbox label:before { 
 
    display: block; 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 20px; 
 
    height: 20px; 
 
    border: 2px solid #ccc; 
 
    cursor: pointer; 
 
} 
 
div.checkbox input { 
 
    display: block; 
 
    float: left; 
 
    outline: none; 
 
    margin-left: -9999px !important; 
 
} 
 
div.checkbox input.hidden + label { 
 
    padding-left: 0; 
 
} 
 
div.checkbox input.hidden + label:before { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="popover-content-html" class="hidden"> 
 
    <form> 
 
    <div class="checkbox"> 
 
     <input type="checkbox" name="vehicle" value="Bike" id="checkbox-1"/> 
 
     <label for="checkbox-1" class="control-panel">Bike</label> 
 
    </div> 
 
    <div class="checkbox"> 
 
     <input type="checkbox" name="vehicle" value="Motorcycle" id="checkbox-2"/> 
 
     <label for="checkbox-2" class="control-panel">Motorcycle</label> 
 
    </div> 
 
    <div class="checkbox"> 
 
     <input type="checkbox" name="vehicle" value="Car" id="checkbox-3"/> 
 
     <label for="checkbox-3" class="control-panel">Car</label> 
 
    </div> 
 
    </form> 
 
</div> 
 

 
<button class="btn btn-primary" id="popover-toggle">Click Me!</button>

Answer 1

您可以刪除形式示出酥料餅的時候，複製從酥料餅的內容這種形式。隱藏彈出窗口之後，您可以將複製窗體預先添加到以前的窗體中，因此總是有一個窗體。

$.noConflict(); 
 

 
var form = jQuery('#popover-content-html').find('form'); 
 

 
function filterToggle(title, toggle, html) { 
 
    toggle.popover({ 
 
    html: true, 
 
    placement: "auto", 
 
    content: function() { 
 
     return html.html(); 
 
    }, 
 
    title: title + '<button type="button" id="close" class="close"></button>', 
 
    template: '<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-title"></div><div class="popover-content"></div></div>' 
 
    }); 
 
}; 
 
jQuery(document).ready(function($) { 
 
    filterToggle(
 
    'Filter Title', 
 
    $('#popover-toggle'), 
 
    $('#popover-content-html') 
 
); 
 
}); 
 

 
jQuery('#popover-toggle').on('shown.bs.popover', function() { 
 
    form.remove(); 
 
    form = jQuery('.popover-content').find('form'); 
 
}); 
 
jQuery('#popover-toggle').on('hidden.bs.popover', function() { 
 
    form.prependTo('#popover-content-html'); 
 
});

.popover { max-width:500px; } 
 
.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] { margin-left:0; } 
 

 
div.checkbox label:before { 
 
    border-radius: 4px; 
 
} 
 
div.checkbox input:checked + label:before { 
 
    border-color: green; 
 
    background: green; 
 
    color: #fff; 
 
    line-height: 16px; 
 
} 
 
div.checkbox { 
 
    position: relative; 
 
} 
 
div.checkbox label { 
 
    padding-left: 30px; 
 
} 
 
div.checkbox label:before { 
 
    display: block; 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 20px; 
 
    height: 20px; 
 
    border: 2px solid #ccc; 
 
    cursor: pointer; 
 
} 
 
div.checkbox input { 
 
    display: block; 
 
    float: left; 
 
    outline: none; 
 
    margin-left: -9999px !important; 
 
} 
 
div.checkbox input.hidden + label { 
 
    padding-left: 0; 
 
} 
 
div.checkbox input.hidden + label:before { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div id="popover-content-html" class="hidden"> 
 
    <form> 
 
    <div class="checkbox"> 
 
     <input type="checkbox" name="vehicle" value="Bike" id="checkbox-1"/> 
 
     <label for="checkbox-1" class="control-panel">Bike</label> 
 
    </div> 
 
    <div class="checkbox"> 
 
     <input type="checkbox" name="vehicle" value="Motorcycle" id="checkbox-2"/> 
 
     <label for="checkbox-2" class="control-panel">Motorcycle</label> 
 
    </div> 
 
    <div class="checkbox"> 
 
     <input type="checkbox" name="vehicle" value="Car" id="checkbox-3"/> 
 
     <label for="checkbox-3" class="control-panel">Car</label> 
 
    </div> 
 
    </form> 
 
</div> 
 
<button class="btn btn-primary" id="popover-toggle">Click Me!</button>