Check Box Widget
Check boxes are useful to capture user's options / selections, etc... Nedil JS checkbox widget can be used to create multiple checkboxes in vertical or horizontal layout.
Layout can be "Vertical" or "Horizontal". Default is vertical.

Usage
$.domLoaded(function() {
	
	$.get("#pan").widget("checkbox", CHECK_BOX_ARRAY, LAYOUT);		
	
}
Check Box Array Options
It contains array of JSON objects. Each JSON will represent a single checkbox and it's properties. The properties are mentioned below.
NameTypeMust/OptionalDescription
idStringOptionalSets id of the checkbox
nameStringMustSets name of the checkbox which can be sent to server
valueStringOptionalSets value for the checkbox. If not provided, default "on" or "off" will be sent to server
textStringMustText associate to the checkbox
enabledBooleanOptionalEnables/Disables a checkbox. Default is true (enabled)
selectBooleanOptionalSelects a checkbox. Default is false (not selected)

Methods
NameDescription
disable( index )To disable a checkbox with specific index in checkbox group
enable( index )To enable a checkbox with specific index in checkbox group

Check Box Widget Example
JS HTML
			$.domLoaded( function()  {
				
				// create checkbox group
				$.get("#cbox1").widget("checkbox",[
					{id: "cin", name : "cin", value: "cinema", text : "Cinema", enabled: true},
					{id: "dan", name : "dan", text : "Dance", enabled: true},
					{id: "mus", name : "mus", text : "Music", enabled: true}
				]);
				
				$.get("#cbox2").widget("checkbox",[
					{id: "cin", name : "cin", value: "cinema", text : "Cinema", enabled: true},
					{id: "dan", name : "dan", text : "Dance", enabled: true},
					{id: "mus", name : "mus", text : "Music", enabled: true}
				], "horizontal");	

				$.get("#cbox3").widget("checkbox",[
					{id: "cin", name : "cin", value: "cinema", text : "Cinema", enabled: false},
					{id: "dan", name : "dan", text : "Dance", enabled: false, select: true},
					{id: "mus", name : "mus", text : "Music", enabled: true}
				], "horizontal");	

				var cb = $.get("#cbox4").widget("checkbox",[
					{id: "cin", name : "cin", value: "cinema", text : "Cinema"},
					{id: "dan", name : "dan", text : "Dance"},
					{id: "mus", name : "mus", text : "Music"}
				], "horizontal");
				
				// enable / disable
				$.get("#toggle").on("click", function() {
					if(cb.chklist[0].enabled) {
						cb.disable(0);
					} else {
						cb.enable(0);
					}
				});
				
				// select / unselect
				$.get("#select").on("click", function() {
					cb.select(1);
				});
			});
<body>

	Horizontal Layout	<div id="cbox2"></div>
	
	Disabled Checkboxes	<div id="cbox3"></div>
	
	Enable/Disable and Select/UnSelect	<div id="cbox4"></div>	
	<type="button" id="toggle" value="Enable/Disable"/> <input type="button" id="select" value="Select/Unselect"/>
	
	Vertical Layout	<div id="cbox1"></div>
		
</body>	
Result