title: Default CSS3 Checkbox Template in MVC
body: <p>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.</p>
  
  <p>I have this template defined:</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>@model Boolean?
  &lt;div class="check-box"&gt;
      @Html.CheckBox("", Model.HasValue &amp;&amp; Model.Value)
      @Html.LabelForWithoutText(m =&gt; m, new object())
  &lt;/div&gt;
  </code></pre>
  
  <p>If I manually write out the HTML like:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="check-box"&gt;
      &lt;input type="checkbox" title="Create?" value="true" name="check" id="chkCreate"&gt;
      &lt;label title="Create?" for="chkCreate"&gt;&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Everything works fine.</p>
  
  <p>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.</p>
  
  <p>The Razor version looks like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="check-box"&gt;
      &lt;input type="checkbox" value="true" name="GloballyShare" id="GloballyShare" data-val-required="The GloballyShare field is required." data-val="true"&gt;
      &lt;input type="hidden" value="false" name="GloballyShare"&gt;
      &lt;label title="GloballyShare" for="GloballyShare"&gt;&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is the extra hidden <code>input</code>.  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.</p>
  
  <p>So I'm wondering how this could be achieved.  You can see a working example of the problem here:</p>
  
  <p><a href="http://jsfiddle.net/9QE2W/5/" rel="nofollow">Default CSS3 Checkbox Template in MVC</a></p>
  
  <p>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</p>