css - 具有动态内容的 Bootstrap 弹出窗口打破了自定义复选框 CSS 功能

Question

请看my sample code .

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

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

有什么想法吗？

这是一个 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>