フォームによるポップオーバーでの重複した入力IDの問題

Question

現在、私はブートストラップ3を使用しており、ポップオーバーの内部にフィルタフォームをロードしています。 CSSベースのチェックボックスエフェクトを作成するには、jsfiddleの例のように、HTMLを特定の方法で構造化する必要があります。

フォームを含む非表示のdivからHTMLを取得してロードしています内側のポップオーバー。このフォームは、label属性のlabel = ""属性から参照されるときに特定のIDの入力をチェックできるラベル機能をカウントします。

しかし、元の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

あなたはポップオーバーが表示されたときにフォームを削除し、ポップオーバーのコンテンツからこのフォームをコピーすることができます。ポップオーバーを隠した後は、コピーしたフォームを前のdivに追加して、常に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>