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>