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.

For faqs.org:

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.

CSS

.readOnlyOverlay {
	position: absolute;
	background-color: #666;
	opacity: 0.3;
	filter: alpha(opacity=30);
	padding: 0 !IMPORTANT;
	margin: 0 !IMPORTANT;
}

javascript function generateOverlay

function generateOverlay(element) {
	var dimension = getDimensions($(element));
	//console.log('top=' + dimension.top + ' left=' + dimension.left +' width='+ dimension.width + ' height=' + dimension.height);

	// disassociate corresponding label attributes so the value of the element cannot be changed by clicking on the labels
	var id = $(element).attr('id');
	var label = $('label[for="'+id+'"]');
	$(label).removeAttr('for');

	// set my tabindex to -1 so tabs will ignore me
	$(element).attr('tabIndex', -1);
	$(label).attr('tabIndex', -1);

	// create a div overlay
	var overlay = $('</pre>
<div class="readOnlyOverlay"></div>
<pre>
').appendTo('body');
	$(overlay).css('top', dimension.top).css('left', dimension.left).css('width', dimension.width).css('height', dimension.height);
}

javascript function getDimensions

function getDimensions(element){
	var ret = {};

	// The multiple acquisitions of the CSS styles are required to cover any border and padding the elements may have.
	// The Ternary (parseInt(...) || 0) statements fix a bug in IE6 where it returns NaN,
	//  which doesn't play nicely when adding to numbers...
	ret.width = $(element).width()
	  + (parseInt($(element).css('borderLeftWidth')) || 0)
	  + (parseInt($(element).css('borderRightWidth')) || 0)
	  + (parseInt($(element).css('padding-left')) || 0)
	  + (parseInt($(element).css('padding-right')) || 0);
	ret.height = $(element).height()
	  + (parseInt($(element).css('borderTopWidth')) || 0)
	  + (parseInt($(element).css('borderBottomWidth')) || 0)
	  + (parseInt($(element).css('padding-bottom')) || 0)
	  + (parseInt($(element).css('padding-bottom')) || 0);
	var offsets = $(element).offset();
	ret.left = offsets.left;
	ret.top = offsets.top;

	return ret;
}

jQuery selector

// 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.

—>Example code (example at jsFiddle)<—