Juri Strumpflohner
Juri Strumpflohner Juri is a full stack developer and tech lead with a special passion for the web and frontend development. He creates online videos for Egghead.io, writes articles on his blog and for tech magazines, speaks at conferences and holds training workshops. Juri is also a recognized Google Developer Expert in Web Technologies

Hack: How to mimic a disabled checkbox

Use JavaScript to simulate a disabled checkbox which also gets sent back during the form submit

2 min read

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

Questions? Thoughts? Hit me up on Twitter
comments powered by Disqus