MVC3 Jquery UI Button Checkbox displays wrong theme colours

Question

My model shows my bool property as false when passed into the View but the view then shows the button in a 'checked' state although the underlying state is still false when I submit the form back through the controller... any ideas?

Here's my index.cshtml

<script type="text/javascript">
        $(document).ready(function(){
            $(".chk").button();
        });
</script>

@Html.CheckBoxFor(m => m.IsAnyDateJoined, new { @class="chk" })
@Html.LabelFor(m => m.IsAnyDateJoined)

So, as explained, why does my model show IsAnyDateJoined (bool=false) although I see the 'checked/true' checkbox state, the underlying Model bool is still rendered as false ??

IsAnyDateJoined: False

Very confusing from a UI perspective. Any help much appreciated.

Looking at the page source... <input class="chk" id="IsAnyDateJoined" name="IsAnyDateJoined" type="checkbox" value="true" /><input name="IsAnyDateJoined" type="hidden" value="false" /><label for="IsAnyDateJoined">IsAnyDateJoined</label>c The property is definitely false, as I render it within the view to be sure. So a bit confused as to why value="true" is set for the checkbox ? — BarryFanta

William Niu William Niu · Accepted Answer · 2011-08-25T14:54:03

I think this forum thread may answer your question: http://forums.asp.net/t/1314753.aspx

When you submit a form with a checkbox, the value is only posted if the checkbox is checked. So, if you leave the checkbox unchecked then nothing will be sent to the server when in many situations you would want false to be sent instead. As the hidden input has the same name as the checkbox, then if the checkbox is unchecked you'll still get a 'false' sent to the server.

When the checkbox is checked, the ModelBinder will automatically take care of extracting the 'true' from the 'true,false'

MVC3 Jquery UI Button Checkbox displays wrong theme colours

1 Answers