在MVC 4中设置复选框样式 [英] Styling checkboxes in MVC 4

问题描述

我怀疑是否有人可以传递一些建议，请..... .....

我有四个复选框，在CSS中设置。这是直接的HTML。

 < div class =checkbox checkbox-danger> 
< input id =showInDirectoryname =showInDirectorytype =checkboxclass =style> 
< label for =showInDirectory> 
在目录中显示？ 
< / label> 
< / div> 
  

这就是在页面上呈现的内容

我试图在'代码'中复制这个，所以在我的模型中我有

  public bool showinDirectory {get;组; } 
  

我根据数据库中保存的值设置了真/假值。 / p>

所以在我看来我已经输入了：

 < div class =checkbox checkbox-danger> 
 @ Html.CheckBoxFor（x => x.showInDirectory，new {id = Html.NameFor（x => x.showInDirectory）}）
< label for =@ Html.NameFor x => x.showInDirectory）>在目录中显示< / label> 
< / div> 
  

当呈现给出时：

< a href =https://i.stack.imgur.com/gPN74.png =nofollow noreferrer>

该值始终为false，并且不可选。生成的实际HTML为：

 < div class =checkbox checkbox-danger> 
< input checked =checkeddata-val =truedata-val-required =showInDirectory字段是必需的。 id =showInDirectoryname =showInDirectorytype =checkboxvalue =true> 
< input name =showInDirectorytype =hiddenvalue =false> 
< label for =showInDirectory>在目录中显示< / label> 
< / div> 
  

我认为这与正在创建的隐藏输入有关，但我无法工作

谢谢，
Craig

解决方案

看起来您正在使用awesome-bootstrap-checkbox.css（找到 here）

我之前和Html Helpers一起使用它确实是导致问题的隐藏复选框。样式表使用需要复选框和其标签并排的选择器，但是html助手在它们之间放置了一个隐藏的输入。

为了使css与Html.CheckboxFor兼容，您需要从以下版本更新样式表：

  .checkbox input [type = checkbox]：checked + label：after {
 font-family：'Glyphicons Halflings'; 
内容：\e013; 
} 
 
 .checkbox-danger input [type =checkbox]：checked + label :: before，
 .checkbox-danger input [type =radio]：选中+标签::之前{
背景色：＃d9534f; 
 border-color：＃d9534f; 
} 
  

至此：

  .checkbox input [type = checkbox]：checked + input [type =hidden] + label：after，
 .checkbox input [type = checkbox]：checked +标签：在{
 font-family：'Glyphicons Halflings'之后; 
内容：\e013; 
} 
 
 .checkbox-danger input [type =checkbox]：checked + input [type =hidden] + label：before，
 .checkbox-danger input [type =checkbox]：checked + label :: before，
 .checkbox-danger input [type =radio]：checked + label :: before {
 background-color：＃d9534f ; 
 border-color：＃d9534f; 
} 
  

新代码说明了额外的隐藏元素。您必须在任何地方进行此更改，在复选框与其标签之间使用+选择符，但这两项更改对于您的示例代码起作用是最低限度的。

I wonder if someone could pass on some advice please.....

I have four checkboxes that are styled up in css. This is the straight HTML.

    <div class="checkbox checkbox-danger">
        <input id="showInDirectory" name="showInDirectory" type="checkbox" class="styled">
        <label for="showInDirectory">
            Show in directory?
        </label>
    </div>

and this is what is rendered on the page

And I'm trying to replicate this in 'code' so in my model I have

public bool showinDirectory { get; set; }

And I set the true/false value based on what's held in the db for this value.

So the in my view I've entered:

    <div class="checkbox checkbox-danger">
        @Html.CheckBoxFor(x => x.showInDirectory, new { id = Html.NameFor(x => x.showInDirectory) })
        <label for="@Html.NameFor(x => x.showInDirectory)">Show in Directory</label>
    </div>

Which when rendered gives:

The value is always false and it's unselectable. The actual HTML that is generated is:

<div class="checkbox checkbox-danger">
<input checked="checked" data-val="true" data-val-required="The showInDirectory field is required." id="showInDirectory" name="showInDirectory" type="checkbox" value="true">
<input name="showInDirectory" type="hidden" value="false">
<label for="showInDirectory">Show in Directory</label>
</div>

I think that it's something to do with the hidden input that's being created but I just can't work out how to fix.

Could someone give me some advise please?

thanks, Craig

解决方案

It looks like you are using the awesome-bootstrap-checkbox.css (found here)

I've use it with Html Helpers before and it is indeed the hidden checkbox that's causing problems. The stylesheet uses selectors that requires the checkbox and its label to be side-by-side, but the html helper places a hidden input between them.

To make the css compatible with Html.CheckboxFor, you'll need to update your stylesheet from this:

.checkbox input[type=checkbox]:checked + label:after {
    font-family: 'Glyphicons Halflings';
    content: "\e013";
}

.checkbox-danger input[type="checkbox"]:checked + label::before, 
.checkbox-danger input[type="radio"]:checked + label::before {
    background-color: #d9534f;
    border-color: #d9534f;
}

To this:

.checkbox input[type=checkbox]:checked + input[type="hidden"] + label:after,
.checkbox input[type=checkbox]:checked + label:after {
    font-family: 'Glyphicons Halflings';
    content: "\e013";
} 

.checkbox-danger input[type="checkbox"]:checked + input[type="hidden"] + label::before,
.checkbox-danger input[type="checkbox"]:checked + label::before, 
.checkbox-danger input[type="radio"]:checked + label::before {
      background-color: #d9534f;
      border-color: #d9534f;
}

The new code accounts for the additional hidden element. You'll have to make this change everywhere the "+" selector is used between the checkbox and its label, but these two changes are the bare minimum to make your example code work.

这篇关于在MVC 4中设置复选框样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！