Readonly checkboxes with JQuery

less than 1 minute read

I have encountered a problem where I needed to disable some checkboxes on my forms. As you know, a disabled html item by design isn’t going to be posted back. So I needed to figure out another solution. So with the disabled tag, we have a readonly tag, which just blurs the checkbox, but lets the user click on it and change the value(I was testing this in Chrome, I don’t know what happens in other browsers). The solution is:

  1. Make your checkboxes readonly by setting the readonly attribute to true
<%= check_box_tag "some_id", :readonly => true %>
  1. Put this javascript in your document.load so the click will be overridden:
// Javascript:
$(':checkbox[readonly="readonly"]').click(function() {
  return false;
// Coffeescript:
$(':checkbox[readonly="readonly"]').click ->