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

Posted 2023-03-05

【中文标题】如何在剃须刀 CheckBoxFor() 中设置引导复选框

【英文标题】：How to set bootstrap checkbox in razor CheckBoxFor()

【发布时间】：2017-07-30 09:34:41

【问题描述】：

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

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

如何在我的表单中设置这个简单的东西？

【问题讨论】：

什么意思 - 不显示？在浏览器中使用 F12 检查渲染的 html 中是否有 input type="checkbox"

不显示 - 无法看到复选框图标，但是当您将鼠标放在它应该在的位置时，它就在那里（鼠标将图标更改为手形）。

貌似css问题，显示相关css

这是检查后的元素：

我认为是这里：.checkbox input[type="checkbox"]:checked + label::after, .checkbox input[type="checkbox"]:checked + input[type=" hidden"] + label::after, .checkbox input[type="radio"]:checked + label::after font-family: "FontAwesome";内容：“\f00c”；

【参考方案1】：

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

【参考方案2】：

这解决了问题：

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

【参考方案3】：

似乎对我不起作用，复选框改变了形状（圆角）但就像它是只读的一样，仍在处理它。

只是对您的解决方案的说明，您可以使用偏移量来保持没有标签的控件对齐，因此请删除

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

并添加 col-md-offset-2 代替：

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

【参考方案4】：

在 mvc 下，基于模型值（布尔值）的真/假复选框也有一个具有相同名称的隐藏字段（据说是为了迎合当您不选中该框时您仍然会在 Forms 集合中获得一个值）

它的这个隐藏字段阻止复选框以引导格式工作。 使用@Html.CheckBoxFor

，我可以看到的引导样式复选框永远不会在mvc下正确显示

这就是我为让它工作而做的事情

        <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'ed 操作中处理它

【参考方案5】：

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

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