Juri Strumpflohner


Hack: How to mimic a disabled checkbox

Author profile pic
Juri Strumpflohner

The world is not always as we want it to be :). So from now and then you have to place a nice hack here and there. Years ago I’ve already written about a similar issue with input fields.

Today I got a flashback to my good old ASP.net WebForms days. A colleague of mine had an issue in that he applied various JavaScript “scripts” to bring some life into his WebForms page. One of those dynamic JS parts included some disabling/enabling of checkboxes based on the values set by the user. The issue: HTML forms won’t include disabled fields into the POST body and as such, you cannot process them properly on the server-side.

Doing something like the following..

<input type="checkbox" onclick="return false">

..won’t work. Existing jQuery listeners still fire. What you have to do instead is:

when disabling:

  • temporarily store all existing handlers registered on the element
  • remove all of them once you have them safely stored somewhere
  • register a click and keydown handler which catches the events and prevents them from being propagating upwards
  • add some CSS style s.t. the element looks like being disabled

when enabling:

  • remove your click/keydown handler which prevents any interaction with the element
  • restore all events on the element which you saved before
  • remove the “disabled” style

The full code is in this jsFiddle. Enjoy :)