如何在Razor的CheckBoxFor()中设置Bootstrap复选框

Question

我想在我的asp .net mvc表单中使用bootstrap风格的复选框，但是我发现这很困难。经过数小时的寻找解决方案，我没有找到适合我的解决方案。

这是我的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>

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

---

无法显示 - 复选框图标无法看到，但是当您将鼠标放在应该出现的位置时，它就在那里（鼠标会变成手形图标）。 - AnotherSimpleName

看起来是 CSS 问题，请显示相关的 CSS。 - teo van kot

尝试添加type="checkbox" -> @Html.CheckBoxFor(model => model.IsSynchronize, new { type = "checkbox"}) - Perdido

@Perdido 这不会改变任何事情。我认为这与TextBoxFor创建了2个输入有关。 - AnotherSimpleName

按下 F12 键，检查您的复选框元素，将最终的 HTML 复制并粘贴到您的问题中。同时，请确保在您的页面中引用了 bootstrap 的 .css 文件。 - Alisson Reinaldo Silva

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

Answer 2

在MVC中，基于模型值（布尔值）的真/假复选框还有一个同名的隐藏字段（据说是为了满足当您不勾选框时仍然在表单集合中获得值的需求）。正是这个隐藏字段阻止了使用Bootstrap格式的复选框。从我所看到的情况来看，在MVC中使用@Html.CheckBoxFor永远无法正确显示Bootstrap样式的复选框。以下是我使其正常工作的方法。

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

不幸的是，当您提交表单时，模型不会更新，您需要在HttpPost操作中处理它

- djack109

Answer 3

我使用了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

Answer 4

由于将类放在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>

顺便说一下，我使用的是 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">

这些库在头文件和代码中使用。

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

- Usman

Answer 5

对我来说似乎不起作用，复选框的形状改变了（角落变圆了），但它仍然像只读一样运行，我还在努力解决。

关于你的解决方案，只是一个小提示，你可以使用偏移量来保持没有标签的控件对齐，因此可以删除。

<label class="col-sm-2"></label>

然后添加 col-md-offset-2：

<div class="col-md-10 col-sm-offset-2">

- user8196665