CODEWITHSUNDEEP
javascripttwitter-bootstrap
Snippet
Snippet

Reputation: 1560

input type checkbox not working inside bootstrap modal

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

Upvotes: 7

Views: 19182

Answers (3)

The Wavelength
The Wavelength

Reputation: 2914

The solution of davidkonrad is very nice. Although, it does not respect label-Tags. Here's a modified version:

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();
});

Upvotes: 7

spoon.GJ
spoon.GJ

Reputation: 25

I also faced this trouble, and It costed me one day to solve it by Jquery.

Unfortunately,there was no easy to be solved by JQuery, but had to switch to other way.

finally angularjs solved this.

try ng-checked.

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

js:just set it true like

$scope.checked = 'true';

Upvotes: -3

davidkonrad
davidkonrad

Reputation: 85528

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/

Upvotes: 7

Related Questions