如何在剃须刀 CheckBoxFor() 中设置引导程序复选框

Question

我想在我的 asp .net mvc 表单中使用 bootstrap 样式的复选框，但是我发现这非常困难。经过几个小时寻找解决方案，我找不到任何适合我的东西。

这是我的 HTML 剃须刀代码，但未显示复选框。

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

这是呈现的 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>

我怎样才能在我的表单中设置这个简单的东西？

原文由 AnotherSimpleName 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这解决了这个问题：

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

原文由 AnotherSimpleName 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我使用了 awesome-bootstrap-checkbox，并创建了没有文本的复选框，如下所示：

 <div class="checkbox checkbox-info checkbox-circle">
    @Html.CheckBoxFor(m => m.PropertyName)
    <label for="@Html.IdFor(m => m.PropertyName)"></label>
</div>

原文由 Alex Young 发布，翻译遵循 CC BY-SA 4.0 许可协议