Listview con Checkbox jQuery Mobile

   Crear una lista con combobox en jQuery Mobile es algo fácil de hacer pero que no esta documentado por ninguna parte es personalizar el ListView en JQueryMobile, lo primero es saber que el componente nos permite utilizar "Split Buttons", por lo que para construir nuestra lista partiremos de esa base combinandolo con "Autocomplete":

    
      

OPCION A
Descripcion A


    
    
  

    
      

OPCION B
Descripcion B


    
    
  

    
      

OPCION C
Descripcion C


    
    
  


$(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("");
  
   //Actualizamos la lista
    $(this).enhanceWithin();
  });
});

   Ejemplo simple

   Si utilizamos AJAX es mas simple, ya que no dependemos del evento "create", sino que actualizamos nuestra lista cargando los input en cada elemento:

/*
 * Si usamos AJAX para llenar la lista, debemos actualizarla
 * antes de cargar los input:
 * 
 * $("ul[data-role='listview']").empty();
 *
 * ... logica para llenar la lista ...
 *
 * $("ul[data-role='listview']").listview("refresh")
 * 
 * Una vez hecho esto entonces continuamos
 */
$("a").click(function(e){
 var $list = $("ul[data-role='listview']").empty();
  
  //Simulando data AJAX
 var elements = 
    "
"+
    "  "+
    "    

OPCION A
"+
    "    Descripcion A

"+
    "  "+
    "  "+
    "
"+
    "
"+
    "  "+
    "    

OPCION B
"+
    "    Descripcion B

"+
    "  "+
    "  "+
    "
"+
    "
"+
    "  "+
    "    

OPCION C
"+
    "    Descripcion C

"+
    "  "+
    "  "+
    "
";
 
  //Cargamos los elementos y actualizamos el componente
  $list.html(elements).listview("refresh");
  
  //Agregamos los input
  $list.find('li').each(function(){
    $(this)
     .find('.ux-checkbox')
      .removeClass("ui-btn-icon-notext ui-icon-carat-r")
      .html("");
  });
  
  //Actualizamos cada elemento en la lista
  $list.enhanceWithin();
  
  //Ocultamos el enlace
  $(this).remove();
});

   Ejemplo simulando una petición AJAX

Recibe notificaciones por correo