input type checkbox not working inside bootstrap modal

Question

Why is that checkbox inside the bootstrap modal not working?

I use this code to make it working but still have a problem

documentBody.on('click','.checkInp',null,function(e) { 
    var checkbox = $(this).find(":checkbox"),
    checked = checkbox.is(":checked"); 
    checkbox.prop("checked", !checked);

});

documentBody.on('click','.checkInp :checkbox',null,function(e) { 
  $(this).parent('span').trigger('click');

}); 

when i click it there is no check appears when its unchecked or it is not uncheck when its check? but if i click the span area the checkbox is marked as check or uncheck

here is my fiddle

Answer 1

Guess you try to overcome bootstrap modals e.preventDefault() in click events - this is why it never works. Also the two events seems to obsulete each other?

Try this instead :

$('.checkInp input:checkbox').on('click', function(e) {

    // prevents the event from bubbling up the DOM tree
    // eg the modal from cancelling the event
    e.stopImmediatePropagation();

    var checked = (e.currentTarget.checked) ? false : true;
    e.currentTarget.checked=(checked) ? false : checked.toString();
});

forked fiddle : http://jsfiddle.net/AurPX/