twitter-bootstrap Bootstrap 复选框无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28631444/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap Checkbox is not working properly
提问by Simple Fellow
I'm using the following mark up and styles (Bootstrap). It shows my checkbox but it is paralysed, that is, it cannot be checked. here is my mark up: I want something more Bootstrap-ish. I know there are other options to make the checkbox look fancy but that do not solve the problem.
我正在使用以下标记和样式（引导程序）。它显示了我的复选框但它瘫痪了，即无法选中它。这是我的标记：我想要一些更像 Bootstrap 的东西。我知道还有其他选项可以使复选框看起来很花哨，但这并不能解决问题。
If you do not have an answer or even a suggestion to share, resist the temptation of closing or down voting it just for fun!
如果您没有答案，甚至没有分享建议，请抵制为了好玩而关闭或拒绝投票的诱惑！
<div class="form-group">
<div class="checkbox">
1.
<input type="checkbox" name="options" id="chk2" />
<label class="checkbox-label">Option 2</label>
</div>
</div>Here is how it looks.
这是它的外观。
What exactly is the issue? If I put the input element inside label I get this ugly thing:
究竟是什么问题？如果我把 input 元素放在 label 里面，我会得到这个丑陋的东西：
回答by broswilli
<input type="checkbox" name="options" id="chk2" />
<label class="checkbox-label">Option 2</label>
The problem is with your label. The for attribute must match with the name attribute of your label
问题出在你的标签上。for 属性必须与标签的 name 属性匹配
回答by raju
Looks need to tweak bootstrap styling for custom checkbox.
看起来需要调整自定义复选框的引导程序样式。
Check this
检查这个
HTML
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
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:"13";
position: absolute;
color: #000;
text-align: center;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
Check in Fiddle
回答by Austin Collins
Reading around it looks like you have to style the checked version and the unchecked version.
阅读它看起来您必须设置已选中版本和未选中版本的样式。
input[type=checkbox]:checked {
}
Styling with this tag should solve your problems.
使用此标签的样式应该可以解决您的问题。
