Post navigation

jQuery read only elements

There is a business requirement on a project I have at work to only allow a certain number of properties editable at a certain stage of the domain object’s life cycle. And like always, the properties defined to be editable could change in the future.

I already have a page that allows the user to edit all properties of the domain object, I really do not wish to duplicate that code. Please note that if you set an input element on a form as disabled, the value associated with the element will NOT be submitted via form post, that certainly is NOT what I’m looking for. I want the values of the *read only* fields still be submitted by the form but I just don’t want the user to edit the values. So I looked into using the readonly attribute in HTML. It’s complete crap.

It’s important to understand that READONLY merely prevents the user from changing the value of the field, not from interacting with the field. In checkboxes, for example, you can check them on or off (thus setting the CHECKED state) but you don’t change the value of the field.

Basically it works half-hearted and most browsers (IE, FF) do not indicate (by default) that a field is readonly. So the users will probably be left wondering why they cannot edit the field.

I searched around for an alternative and found this wonderful jQuery plugin readonly. Even though I couldn’t get it to work right for my application, the idea behind it is genius. You basically put overlay layers on top of any input fields you wish to make read only. The plugin seems a bit outdated. Perhaps it doesn’t work well with the newer version of jQuery but the idea still works well. Therefore I implemented my own.

This implementation automatically makes all input fields read only unless the input field has the class excludeMeFromReadOnly. This is just my implementation for demonstration. I do not provide any support for this code. Use where you see fit.

// select all input,select elements. I'd wrap my form in a div.
$('div#formContent input, div#formContent select, div#formContent textarea').each(function(i, element) {
// if the element doesn't have the class named excludeMeFromReadOnly, overlay it to make it look like it's read only
if(!$(element).hasClass('excludeMeFromReadOnly')) {
generateOverlay($(element));
}
});

Please note, the plugin contains a lot more logic including IE hacks etc. Fortunately for me, I really don’t care about IE prior to version 8 in my particular scenario. Therefore I don’t need all of those hacks.