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

【问题标题】：input type checkbox not working inside bootstrap modal输入类型复选框在引导模式中不起作用
【发布时间】：2016-01-16 14:46:27
【问题描述】：

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

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

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

});

当我单击它时，未选中时没有选中出现，或者选中时没有取消选中？但是如果我单击跨区域，则该复选框被标记为选中或取消选中

这是我的fiddle

【问题讨论】：

标签： javascript twitter-bootstrap

【解决方案1】：

猜你试图在点击事件中克服引导模式e.preventDefault() - 这就是它永远不起作用的原因。这两个事件似乎也互相淘汰了？

试试这个：

$('.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/

【讨论】：

【解决方案2】：

davidkonrad 的解决方案非常好。虽然，它不尊重标签标签。这是修改后的版本：

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

【讨论】：

（这不是对所有标签都适用吗？可能并不可怕，但并不精确。）
Imo，应该这样。它只捕获 .modal-elements 中的标签。
是的，会的，但可能还有其他标签。

【解决方案3】：

我也遇到过这个问题，用Jquery解决了我花了一天时间。

不幸的是，JQuery不好解决，只好改用其他方式。

终于 angularjs 解决了这个问题。

尝试 ng-checked。

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

js: 设置为 true 就像

$scope.checked = 'true';

【讨论】：

与问题完全无关；切换到不同的前端框架当然是一个解决方案，但它并没有直接解决两年多前的 OP 问题。