默认CSS3复选框模板在MVC [英] Default CSS3 Checkbox Template in MVC

问题描述

我一直在试图获取为我的布尔编辑器编写的默认复选框模板，并且由于MVC Razor如何为单个布尔模型属性呈现多个输入元素而遇到问题。

I've been trying to get the default checkbox template written for my Boolean editors and I've run into an issue due to how MVC Razor renders multiple input elements for a single boolean model property.

我有这个模板定义：

@model Boolean?
<div class="check-box">
    @Html.CheckBox("", Model.HasValue && Model.Value)
    @Html.LabelForWithoutText(m => m, new object())
</div>

如果我手动写出如下：

<div class="check-box">
    <input type="checkbox" title="Create?" value="true" name="check" id="chkCreate">
    <label title="Create?" for="chkCreate"></label>
</div>

一切正常。

Razor将我的模板呈现在模型的布尔属性上，html是相当不同的。

But when Razor renders my template on a Boolean property of a model the html is rather different. Due to how MVC renders other hidden inputs for posting booleans back to action methods.

Razor版本看起来像这样：

The Razor version looks like this:

<div class="check-box">
    <input type="checkbox" value="true" name="GloballyShare" id="GloballyShare" data-val-required="The GloballyShare field is required." data-val="true">
    <input type="hidden" value="false" name="GloballyShare">
    <label title="GloballyShare" for="GloballyShare"></label>
</div>

问题是额外隐藏输入。我不想改变这种行为，因为这将在全局范围内影响MVC的形式默认工作，我不能想到一种方法来处理这在CSS中。

The problem is the extra hidden input. I don't want to change this behaviour as that will globally effect how MVC form work by default and I can't think of a way to deal with this in CSS.

所以我想知道如何可以实现。您可以在这里查看问题的工作示例：

So I'm wondering how this could be achieved. You can see a working example of the problem here:

MVC中的默认CSS3复选框模板

如果您尝试它，然后删除隐藏的输入元素并再次尝试，最顶部的复选框开始工作与底部相同复选框

If you try it then remove the hidden input element and try it again the top most checkbox starts working the same as the bottom checkbox

推荐答案

我刚刚设法修复了jsFiddle。

I've just managed to fix the jsFiddle.

我将标签选择器从 + 更改为〜，两个复选框现在都可以正常工作：

I changed the label selector from a + to a ~ and both checkboxes are now working:

.check-box input[type=checkbox]:checked + label {

已更改为：

.check-box input[type=checkbox]:checked ~ label {

修正jsFiddle

这篇关于默认CSS3复选框模板在MVC的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！