To achieve the jQM look and feel for checkboxes, you can implement the following methods:
Take a look at this DEMO to see both options in action
For a controlgroup appearance
<ul data-role="listview" data-filter="true" id="progress_list" data-filter-placeholder="Filter Names" class="has-right-radio">
<li data-icon="false" class="listitem">
<a href="#" onClick='#' class="ui-btn">Jashwin</a>
<div data-role="controlgroup" data-type="horizontal" data-mini="true" class="right-radio">
<label><input type="checkbox" name="submt_photo" id="submt_photo" class="custom" checked /> A</label>
<label><input type="checkbox" name="submt_Identity" id="submt_Identity" class="custom" />B</label>
<label><input type="checkbox" name="submt_Address" id="submt_Address" class="custom" checked />C</label>
</div>
</li>
</ul>
.has-right-radio a {
padding-right: 124px !important;
}
.right-radio {
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
width: 112px;
}
.right-radio .ui-checkbox input {
visibility: hidden;
}
If individual checkboxes suit your needs better than toggle buttons:
<ul data-role="listview" data-filter="true" id="progress_list2" data-filter-placeholder="Filter Names" class="has-right-radio">
<li data-icon="false" class="listitem">
<a href="#" onClick='#' class="ui-btn">Jashwin</a>
<div class="right-radio">
<label><input type="checkbox" name="submt_photo" id="submt_photo" class="custom" checked /> </label>
<label><input type="checkbox" name="submt_Identity" id="submt_Identity" class="custom" /> </label>
<label><input type="checkbox" name="submt_Address" id="submt_Address" class="custom" checked /> </label>
</div>
</li>
</ul>
#progress_list2 .has-right-radio a {
padding-right: 132px !important;
}
#progress_list2 .right-radio {
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
width: 120px;
border: 1px solid rgb(204, 204, 204);
}
#progress_list2 .right-radio .ui-checkbox {
display: inline;
float: left;
padding: 0;
margin: 0;
}
#progress_list2 .right-radio .ui-checkbox label {
padding-right: 0;
padding-left: 36px;
border:0;
border-radius: 0;
}