This time I will share jQuery Plugin and tutorial about jQuery Plugin For Read Only Elements – Disabler, hope it will help you in programming stack.
File Size:
135 KB
Views Total:
1087
Last Update:
6 years ago
Publish Date:
8 years ago
Official Website:
Go to website
License:
MIT
Disabler is a jQuery plugin that helps you to set any element of your webpage to Read-Only and show their values as text. You can also use this plugin to disable buttons, unbind all events and more. The element of your container can be disabled separately.
Basic Usage:
1. Include necessary javascript files in the head section of your page
3<script src="./script/jquery-disabler.js"></script>
2. The HTML
01<form id="frmData" action="#">
04<th><label for="message">Message</label></th>
05<td><input id="message" type="text" name="myText" size="20" value="Have a nice day!"/></td>
08<th><label for="numberChoice">Number</label></th>
09<td><select id="numberChoice" name="numberChoice">
10<option value="">-- Pick a Number --</option>
11<option value="1">One</option>
12<option value="2">Two</option>
13<option value="3">Three</option>
14<option value="4">Four</option>
15<option value="5">Five</option>
19<th><label for="numberChoiceMultiple">Number (Multiple)</label></th>
20<td><select id="numberChoiceMultiple" name="numberChoiceMultiple" multiple="multiple" size="6" style="min-width: 85px">
21<option value="">-- Pick a Number --</option>
22<option value="1" selected="selected">One</option>
23<option value="2">Two</option>
24<option value="3" selected="selected">Three</option>
25<option value="4">Four</option>
26<option value="5" selected="selected">Five</option>
30<th><label>Favorite Sport</label></th>
31<td><input type="checkbox" id="cbxFootball" name="cbxFootball" checked="checked" />
32<label for="cbxFootball">Football</label>
33<input type="checkbox" id="cbxBasketball" name="cbxBasketball" />
34<label for="cbxBasketBall">Basketball</label></td>
37<th><label>Happy?</label></th>
38<td><input type="radio" id="myRadioYes" name="myRadio" checked="checked" />
39<label for="myRadioYes">Yes</label>
41<input type="radio" id="myRadioNo" name="myRadio" />
42<label for="myRadioNo">No</label></td>
45<th><label for="dtPicker">Game Date</label></th>
46<td><input type="text" id="dtPicker" name="dtPicker" size="11" value="10/27/2012" /></td>
49<th><label for="myTextArea">Comment</label></th>
50<td><textarea id="myTextArea" name="myTextArea" rows="5" cols="50">I have something to say!</textarea></td>
54<input name="btnDisable" type="button" value="Disable" class="disabler-ignore-readonly" />
55</form><br type="_moz">
3. The javascript
01<script type="text/javascript">
03$(":button:not(.no-ui), :submit:not(.no-ui)").button();
04$('input:text, select, textarea').addClass('ui-widget ui-widget-content ui-corner-all');
source : jqueryscript.net
