Dynamic Checkboxes
Description
We can dynamically create, enable, disable, and refresh our checkboxes.
Example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Forms</title>
<meta name="viewport"
content="width=device-width, minimum-scale=1.0, maximum-scale=1.0;">
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<style>
.ui-controlgroup-horizontal .ui-checkbox label {
/* Reduce font size to prevent horizontal buttons from wrapping */
font-size: 11px !important;
}<!--from w w w .ja v a2s .co m-->
</style>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Checkboxes</h1>
</div>
<div data-role="content">
<form id="test" id="test" action="#" method="post">
<fieldset data-role="controlgroup">
<legend>Genre:</legend>
<input type="checkbox" name="genre" id="c1" />
<label for="c1" data-theme="c">Action</label>
<input type="checkbox" name="genre" id="c2" />
<label for="c2" data-theme="c">Comedy</label>
<input type="checkbox" name="genre" id="c3" />
<label for="c3" data-theme="c">Drama</label>
</fieldset>
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Genre:</legend>
<input type="checkbox" name="genre" id="c1" />
<label for="c1" data-theme="b">Action</label>
<input type="checkbox" name="genre" id="c2" />
<label for="c2" data-theme="b">Comedy</label>
<input type="checkbox" name="genre" id="c3" />
<label for="c3" data-theme="b">Drama</label>
</fieldset>
</form>
</div>
</div>
</body>
</html>