具有动态内容的 Bootstrap 弹出窗口会破坏自定义复选框 CSS 功能

Question

请看my sample code。

我有使用 Font Awesome 图标的自定义复选框。在我使用加载到 document.ready 上的自定义弹出框内容之前，一切正常。

当以这种方式加载内容时（而不是直接在锚元素中指定内容），复选框停止工作（无法检查它们）。

有什么想法吗？

这里是working example，里面直接设置了内容。

仅供参考，让 Font Awesome 复选框看起来像是被选中的相关 CSS 代码是：

input[type=checkbox]:checked + label:before { content: "\f046"; }

Answer 1

应用此 CSS。

input[type="checkbox"] {
display: block;
height: 21px;
opacity: 0;
position: absolute;
width: 20px;
left:0;
top:0;
z-index: 999;}
.test{position:relative}

还有 HTML

<div class="test"><input id="box1" type="checkbox" />
<label for="box1">Checkbox 1</label>
</div>
<div class="test">
    <input id="box1" type="checkbox" />
    <label for="box1">Checkbox 2</label>
</div>
<div class="test">
    <input id="box1" type="checkbox" />
    <label for="box1">Checkbox 3</label>
</div>