Bootstrap 復選框無法正常工作

Question

我正在使用以下標記和 styles (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>

這是它的樣子。

到底是什么問題？ 如果我把 input 元素放在 label 里面，我會得到這個丑陋的東西：

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