twitter-bootstrap 如何在剃刀 CheckBoxFor() 中设置引导程序复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42694681/
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
How to set bootstrap checkbox in razor CheckBoxFor()
提问by AnotherSimpleName
I want to use bootstrap styled checkbox in my asp .net mvc form, however I find it very difficult. After hours looking for solution, I couldn't find anything that works for me.
我想在我的 asp .net mvc 表单中使用引导程序样式的复选框，但是我发现这很困难。经过几个小时的寻找解决方案，我找不到任何适合我的东西。
Here is my HTML razor code, however checkbox doesn't show.
这是我的 HTML razor 代码，但未显示复选框。
<div class="form-group">
@Html.LabelFor(c => c.IsSynchronize, new { @class = "col-sm-2 control-label" })
<div class="col-sm-10">
<div class="checkbox">
@Html.CheckBoxFor(model => model.IsSynchronize)
</div>
</div>
</div>
Here is rendered HTML :
这是呈现的 HTML ：
<div class="checkbox">
<input data-val="true" data-val-required="Pole Synchronizacja jest wymagane." id="IsSynchronize" name="IsSynchronize" type="checkbox" value="true">
<input name="IsSynchronize" type="hidden" value="false">
</div>
How can I setup this simple thing in my form?
如何在我的表单中设置这个简单的东西？
采纳答案by AnotherSimpleName
This solved the issue:
这解决了这个问题：
<div class="form-group">
<label class="col-sm-2"></label>
<div class="col-sm-10">
<div class="checkbox">
@Html.CheckBoxFor(model => model.Synchronize)
@Html.LabelFor(c => c.Synchronize)
</div>
</div>
</div>
回答by Usman
its not working because of putting the class in div so add the class in checkboxlike this
它不起作用，因为将类放在 div 中，所以checkbox像这样添加类
<div class="form-group">
@Html.LabelFor(c => c.IsSynchronize, new { @class = "col-sm-2 control-label" })
<div class="col-sm-10">
@Html.CheckBoxFor(model => model.IsSynchronize ,new {@class="checkbox"})
</div>
</div>
btw i use icheckwhich are a bit fancy you just have to add
顺便说一句，我使用的icheck是有点花哨的你只需要添加
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.rawgit.com/bantikyan/icheck-bootstrap/master/icheck-bootstrap.min.css">
these libraries in header and in code use
这些库在标题和代码中使用
<div class="form-group">
<div class="checkbox icheck-turquoise">
@Html.CheckBoxFor(model => model.IsSynchronize)
@Html.LabelFor(c => c.IsSynchronize, new { @class = "col-sm-2 control-label" })
</div>
</div>
回答by dHyman109
Under mvc a true/false checkbox based on the model value (boolean) also has a hidden field with the same name (supposedly to cater for when you don't check the box you still get a value in the Forms collection)
在 mvc 下，基于模型值（布尔值）的真/假复选框也有一个同名的隐藏字段（据说是为了满足当您不选中该框时仍会在 Forms 集合中获得值的情况）
Its this hidden field that stops the checkbox working in bootstrap format. A bootstrap styled checkbox from what I can see will never display properly under mvc using @Html.CheckBoxFor
它的这个隐藏字段会阻止复选框以引导程序格式工作。使用@Html.CheckBoxFor，我所看到的引导程序样式的复选框永远不会在 mvc 下正确显示
This is what i did to get it working
这就是我为让它工作而做的
<div class="checkbox">
<input type="checkbox" value="@Model.propertyname" id="[same as property name]" name="[same as property name]" />
<label for="propertyname">any label you like</label>
</div>
Unfortunately the model isn't updated when you post the form and you have to handle that in the HttpPost'ed action
不幸的是，当您发布表单时模型没有更新，您必须在 HttpPost 的操作中处理它
回答by Alex Young
I used awesome-bootstrap-checkbox, and create checkbox without text like this:
我使用了 awesome-bootstrap-checkbox，并创建了没有文本的复选框，如下所示：
<div class="checkbox checkbox-info checkbox-circle">
@Html.CheckBoxFor(m => m.PropertyName)
<label for="@Html.IdFor(m => m.PropertyName)"></label>
</div>
回答by user8196665
Doesn't seem to work for me, the checkbox changes shape (the corners round) but acts as though its read only, still working on it.
似乎对我不起作用，复选框会改变形状（圆角）但好像它是只读的，仍在处理它。
Just a note to your solution, you could use the offset to keep the controls aligned which don't have labels, so remove
只是对您的解决方案的说明，您可以使用偏移量来保持没有标签的控件对齐，因此请删除
<label class="col-sm-2"></label>
And add col-md-offset-2instead:
并添加col-md-offset-2代替：
<div class="col-md-10 col-sm-offset-2">
