Jquery mobile list view with checkbox in phonegap

I am building a jquery mobile list view by dynamically adding list elements inside a list view using the below code. The below code works fine and it displayed the list view with the checkbox as expected. But the problem is when I launch in the mobile and try to scroll the listview the checkbox of the corresponding list item that was touched gets selected which I dont want.

I.e, the checkbox should be selected only if the checkbox is touched and not the list item. How can I do that?

$('#ul_history_list').append('<li>' +
    '<a href="#" style="padding:0px !important; margin:0px !important;">' +
      '<label style="margin:0px !important; border:0px !important;"' +
        '<input name="chk_history" id="chk_history" type="checkbox" />' +
        '<div>' +
          '<h3>'+header+'</h3>' +
          '<p>'+message+'</p>' +
          '<p class="ui-li-aside"><i>Sent</i></p>' +
        '</div>' +
      '</label>' +
    '</a>' +
    '<a href="#pg_history-view"  class="nav-container" ></a>'+
    '</li>');
  });
$("input[name=chk_history]").checkboxradio();
$('#ul_history_list').listview('refresh');

The below screen will show me the problem. Acutally I touched the middle of the the list item and I tried to scroll the view. The list view scrolled but the list item that was touched got selected which I dont want.