The JQUERY disable widget can be applied to the HTML container (such as DIV) or to the individual user interface elements and disable or set the contents of the container only to reading, and return again. If the work is on the HTML container, the Distabler user interface performs a deep examination (the descendants of the descendants) of each element inside the container and sympathizes or puts the element as reading only. When disabled or adjusted to read-only, all events are removed from the elements, and the elements that usually respond to the clicks (such as hyperlinks) are not responding. When a process or a process of reading is retracted only, all the events that have been removed, and all the elements that usually respond to the clicks are responding again.

Using private data features and CSS categories, pages can guide the disabled additional component to hide the elements when disabled, ignore requests for certain elements, and change the element to display it as text instead of disrupting it. Asbabler also includes support for all sources of JQUERY UI.

How to make use of it:

1. Include the necessary Javascript files in the head section of your page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="./script/jquery-disabler.js"></script>

2. HTML

<form id="frmData" action="#">
<table>
<tr>
<th><label for="message">Message</label></th>
<td><input id="message" type="text" name="myText" size="20" value="Have a nice day!"/></td>
</tr>
<tr>
<th><label for="numberChoice">Number</label></th>
<td><select id="numberChoice" name="numberChoice">
<option value="">-- Pick a Number --</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
<option value="5">Five</option>
</select></td>
</tr>
<tr>
<th><label for="numberChoiceMultiple">Number (Multiple)</label></th>
<td><select id="numberChoiceMultiple" name="numberChoiceMultiple" multiple="multiple" size="6" style="min-width: 85px">
<option value="">-- Pick a Number --</option>
<option value="1" selected="selected">One</option>
<option value="2">Two</option>
<option value="3" selected="selected">Three</option>
<option value="4">Four</option>
<option value="5" selected="selected">Five</option>
</select></td>
</tr>
<tr>
<th><label>Favorite Sport</label></th>
<td><input type="checkbox" id="cbxFootball" name="cbxFootball" checked="checked" />
<label for="cbxFootball">Football</label>
<input type="checkbox" id="cbxBasketball" name="cbxBasketball" />
<label for="cbxBasketBall">Basketball</label></td>
</tr>
<tr>
<th><label>Happy?</label></th>
<td><input type="radio" id="myRadioYes" name="myRadio" checked="checked" />
<label for="myRadioYes">Yes</label>
<br />
<input type="radio" id="myRadioNo" name="myRadio" />
<label for="myRadioNo">No</label></td>
</tr>
<tr>
<th><label for="dtPicker">Game Date</label></th>
<td><input type="text" id="dtPicker" name="dtPicker" size="11" value="10/27/2012" /></td>
</tr>
<tr>
<th><label for="myTextArea">Comment</label></th>
<td><textarea id="myTextArea" name="myTextArea" rows="5" cols="50">I have something to say!</textarea></td>
</tr>
</table>

<input name="btnDisable" type="button" value="Disable" class="disabler-ignore-readonly" />
</form><br type="_moz">

3. Java Script

<script type="text/javascript">
$(function() {
$(":button:not(.no-ui), :submit:not(.no-ui)").button();
$('input:text, select, textarea').addClass('ui-widget ui-widget-content ui-corner-all');
$('input[name="dtPicker"]').datepicker({
dateFormat: 'mm/dd/yy',
numberOfMonths: 1,
showButtonPanel: true,
changeYear: true,
yearRange: '2000:cnnnn'
});

$("div#ui-dialog-message").dialog({
autoOpen : false,
closeOnEscape : true,
modal : true,
resizable : true,
title : "Demo's are fun!",
zIndex : 1000,
buttons : { Ok : function() {
$(this).dialog("close");
}}
});

var myData = $("div#myData").disabler();


$("input[name='btnDisable']").on("click", function(e) {
e.preventDefault();

var currentDisabled = myData.disabler("option", "disable");
if (currentDisabled) {
$(this).button("option", "label", "Disable");
myData.disabler("enable");
} else {
$(this).button("option", "label", "Enable");
myData.disabler("disable");
}
});
});
</script>

jquery plugin for read only element, jquery-disabler Plugin/Github

See Demo And Download

Official Website(dgestep): Click Here

This superior jQuery/javascript plugin is developed by dgestep. For extra advanced usage, please go to the official website.