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]:checked {

}

使用此标记进行样式化可以解决您的问题。

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;
}

签入Fiddle

Answer 3

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

问题在于您的标签。 for属性必须与标签的名称属性

匹配

Answer 4

使用“ for”属性可以解决此问题。

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

Answer 5

  <div class="col-md-3">
            <input class="form-check-input" type="checkbox" id="" asp-for="">
            <label class="form-check-label" for="" asp-for="">
            </label>
        </div>