Type input checkbox not working inside bootstrap modal

Question

Why doesn't this checkbox in bootstrap module work?

I use this code to make it work, but still has problems

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 on it, there is no check if it is unchecked or it doesn’t uncheck the box when it is checked? but if I clicked the span area, then this flag is marked as a checkmark or uncheck

here is my fiddle

Answer 1

Guess you are trying to overcome the modalities of boottrap e.preventDefault() in click events - this is why it never works. Also, both events seem to be deceiving 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/

Answer 2

The davidkonrad solution is very nice. Although, he does not observe tag labels. Here's the version changed:

 jQuery(".modal input:checkbox,.modal label").on("click", function(e) { e.stopImmediatePropagation(); var element = (e.currentTarget.htmlFor !== undefined) ? e.currentTarget.htmlFor : e.currentTarget; var checked = (element.checked) ? false : true; element.checked = (checked) ? false : checked.toString(); }); 

Answer 3

I also ran into this problem, and it was worth it to me to solve its jQuery one day.

Unfortunately, jQuery was not easy to solve, but had to switch to a different path.

finally, corner grilles solved this.

try ng-checked.

 <div class="modal fad" .... <input type="checkbox" class="css-checkbox" ng-checked="checked"> </div> 

js: just set it as

 $scope.checked = 'true';