引导复选框无法正常工作

Question

我正在使用以下标记和样式（Bootstrap）。它显示了我的复选框，但它处于瘫痪状态，即无法选中。这是我的标记： 我想要更多 Bootstrap 风格的东西。我知道还有其他选项可以使复选框看起来很漂亮，但这并不能解决问题。

<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 {

}

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

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>

Answer 6

这不是 Bootstrap 造成的，而是 Wordpress 造成的。 添加“display:block;”后，复选框变得可见到复选框输入标签的 css。

<input class="form-check-input" type="checkbox" id="">

input.form-check-input {
display:block;
}

Answer 7

如果复选框包含在标签内，用户体验会大大改善

<div class="checkbox">
    <label class="checkbox-label">
        1.-<input type="checkbox" class="form-check-input"/>
        Option 2
    </label>
</div>