jQuery Widget That Disables or Presents A Read-only View Of The Content

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>


<form id="frmData" action="#">
<th><label for="message">Message</label></th>
<td><input id="message" type="text" name="myText" size="20" value="Have a nice day!"/></td>
<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>
<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>
<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>
<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>
<th><label for="dtPicker">Game Date</label></th>
<td><input type="text" id="dtPicker" name="dtPicker" size="11" value="10/27/2012" /></td>
<th><label for="myTextArea">Comment</label></th>
<td><textarea id="myTextArea" name="myTextArea" rows="5" cols="50">I have something to say!</textarea></td>

<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');
dateFormat: 'mm/dd/yy',
numberOfMonths: 1,
showButtonPanel: true,
changeYear: true,
yearRange: '2000:cnnnn'

autoOpen : false,
closeOnEscape : true,
modal : true,
resizable : true,
title : "Demo's are fun!",
zIndex : 1000,
buttons : { Ok : function() {

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

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

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

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.

Related Posts


Responsive Image Gallery Lightbox jQuery Plugin | VenoBox

VenoBox is a responsive jQuery modal window plugin suitable for images, embedded content, iFrames, Google Maps, Vimeo, and YouTube videos. The big difference compared to many other…


[Animation] Bootstrap Multi-Level Responsive Dropdown Menu

Bootstrap-based multi-level dropdown navigation menu with cool animations. The dropdown on Hover is a jQuery plugin used to create Bootstrap multi-level scroll-triggered dropdown menus with CSS3 animations…


Google Translate Dropdown Customize With Country Flag | GT API

Flag google translates jQuery text that takes advantage of the Google Cloud Translation API to translate web content between languages by selecting a country from the dropdown…


HTML 5 File Input Optimized for Bootstrap 4.x./3.x with File Preview | Bootstrap Fileinput

bootstrap-fileinput is an improved HTML 5 file input  Bootstrap 5.x, 4.x and 3.x with file preview for different files, provides multiple selections, resumable section uploads, and more….


CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…


How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…

Leave a Reply

Your email address will not be published. Required fields are marked *