java script (jQuery) makes page read only

My project had a  requirement which only allow users edit the object when they had proper permission. If not, the page will be read only. The page contained a lot of html elements, text, drop down list, radio, button, sumbit… and the same logic should be applied on every page in the application. I use JQuery to disable or replace the element. It is very easy to apply it to all pages. It is not a perfect way but it is one option. 

        $.each($(':input'), function(index, obj){
		if (obj.type=="button" || obj.type=="radio"){
			$(this).replaceWith("");
			return;
		} 
		if (obj.type == "submit" && obj.name!="cancel") {
			$(this).replaceWith("");
			return;
		}
		if (obj.type == "submit" && obj.name=="cancel"){
			return;
		}
		if(obj.type.match("^select")) {
			$(this).replaceWith($(this).find(":selected").text());
			return;
		}
		
		$(this).attr('readonly', true);
		$(this).attr('class', 'disabledElement');		
	});

The code above removes all buttons and sumbit except “cancel” button as we still need it to allow user to go back to the previous page.  The code also makes element read only, removes radio button, replaces drop down list with its display value. It also sets a new css class to all readonly elements, which I can remove the border of the textbox and make it like a label.