Bootstrap复选框无法正常工作

Question

我正在使用以下标记和样式(Bootstrap).它显示我的复选框,但它已瘫痪,即无法检查.这是我的标记:我想要更多Bootstrap-ish.我知道还有其他选项可以使复选框看起来很花哨但不能解决问题.

如果你没有答案,甚至没有建议分享,那就是为了好玩而抵制关闭或缩小投票的诱惑!

<div class="form-group">
  <div class="checkbox">
    1.
    <input type="checkbox" name="options" id="chk2" />
    <label class="checkbox-label">Option 2</label>
  </div>
</div>

这是它的外观.

究竟是什么问题？如果我将输入元素放在标签中,我会得到这个丑陋的东西:

Answer 1

<input type="checkbox" name="options" id="chk2" />
<label class="checkbox-label">Option 2</label>

问题出在你的标签上。for 属性必须与标签的 name 属性匹配

Answer 2

看起来需要调整自定义复选框的引导程序样式。

检查这个

HTML

<div class="form-group">
    <div class="checkbox">
        <label for="check">
            <input type="checkbox" id="check"/>
            <span class="fake-input"></span>
            <span class="fake-label">Option 2</span>
        </label>
    </div>
</div

CSS

.fake-input {
    float: left;
    width: 20px;
    height: 20px;
    border: 1px solid #9f9f9f;
    background: #fff;
    vertical-align: middle;
    position: relative;
    margin-right: 10px;
    border-radius: 4px;
}
input[type="checkbox"] {
    position: fixed;
    top: -9999px;
    left: -9999px;
}
input[type="checkbox"]:checked + .fake-input:before {
    content:"\2713";
    position: absolute;
    color: #000;
    text-align: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

签入小提琴

Answer 3

阅读周围内容后，您似乎必须设置已检查版本和未检查版本的样式。

input[type=checkbox]:checked {

}

使用此标签进行样式设置应该可以解决您的问题。