Default CSS3 Checkbox Template in MVC

Question

Я пытаюсь получить шаблон по умолчанию, написанный для моих логических редакторов, и я столкнулся с проблемой из-за того, как MVC Razor отображает несколько входных элементов для одного свойства булевской модели.

У меня есть этот шаблон определен:

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

Если я вручную выписывать HTML, как:

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

Все работает отлично.

Но когда Razor отображает мой шаблон на булевом свойстве модели, html отличается от другого. Из-за того, как MVC отображает другие скрытые входы для публикации логических методов обратно в действие.

версия Razor выглядит следующим образом:

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

Проблема заключается дополнительный скрытый input. Я не хочу изменять это поведение, так как это будет глобально влиять на работу формы MVC по умолчанию, и я не могу придумать способ справиться с этим в CSS.

Так что мне интересно, как это можно достичь. Вы можете увидеть рабочий пример проблемы здесь:

Default CSS3 Checkbox Template in MVC

Если вы попытаетесь это то удалить скрытый элемент ввода и попробуйте еще раз самый верхний флажок начинает работать так же, как нижний флажок

Answer 1

Мне только удалось исправить jsFiddle.

Я изменил селектор этикетки от + к ~ и обе галочки теперь работают:

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

Изменен:

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

Fixed jsFiddle