Checkbox con ListView jQuery Mobile

Carlitox en la Web

by Carlos Martinez

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
<ul data-role="listview" data-inset="true">
  <li data-icon='false'>
    <a href='#'>
      <h2>OPCION A</h2>
      <p>Descripcion A</p>
    </a>
    <a class='ux-checkbox' href='#'></a>
  </li>
  <li data-icon='false'>
    <a href='#'>
      <h2>OPCION B</h2>
      <p>Descripcion B</p>
    </a>
    <a class='ux-checkbox' href='#'></a>
  </li>
  <li data-icon='false'>
    <a href='#'>
      <h2>OPCION C</h2>
      <p>Descripcion C</p>
    </a>
    <a class='ux-checkbox' href='#'></a>
  </li>
</ul>

CSS

.ux-checkbox {
  padding-top: 25px !important;
}

JavaScript

$(function(e){
	//Agregamos los elementos
  $("ul[data-role='listview']").find('li').each(function(){
    $(this)
    	.find('.ux-checkbox')
      .removeClass("ui-btn-icon-notext ui-icon-carat-r")
      .html("<input type='checkbox'/>");
  
  	//Actualizamos la lista
    $(this).enhanceWithin();
  });
});