Clicked checkbox does not post back to the server

Recently I got a bit stuck trying to do the simple task of set some values on a checkbox. The form was quite complex and I was finding that checking a checkbox to signify a "FollowUp" had occurred was not being posted back to the server. It took quite a bit of fiddling around before I got to the bottom of the problem so thought I would record the solution...
When you create a checkbox using the HtmlHelper class in ASP.NET MVC 4 the html produced actually contains a hidden checkbox. This hidden checkbox provides a default value of false in the event that the user does not actually click the checkbox:

When the form is submitted in this scenario the form posts back with the hidden value in the query string. if the checkbox has been clicked, then two values are posted back and with the first taking precedence:

   &FollowUp=true&FollowUp=false

My checkbox had got a little stuck because I had used the incorrect method to try to disable and clear the checkbox when the form initially loaded:

So using val was a bad idea, it is the checked value of the checkbox that matters. But the real problem appears to be using the attributes method rather than the properties method. The jQuery documentation explaings this well.

For some more information on the checkbox HtmlHelper read here.

Popular posts from this blog

A Simple 3 Layer Architecture