输入类型复选框在引导模式内不起作用

Question

为什么bootstrap模式中的复选框不起作用？

我使用此代码使其工作但仍然有问题

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');

}); 

当我点击它时,如果未经检查或在检查时未取消选中,则不会显示检查？但如果我单击跨区域,则复选框被标记为选中或取消选中

这是我的小提琴

Answer 1

猜猜你试图e.preventDefault()在点击事件中克服bootstrap模态- 这就是为什么它永远不会起作用.这两个事件似乎相互混淆了吗？

试试这个:

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

分叉小提琴:http://jsfiddle.net/AurPX/

Answer 2

davidkonrad的解决方案非常好.虽然,它不尊重label-Tags.这是一个修改版本:

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