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

input type checkbox not working inside bootstrap modal

本文关键字：模式 不起作用 类型 复选框 输入      更新时间：2023-09-26

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

我用这个代码使它工作，但仍然有一个问题

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

当我单击它时，未选中时没有显示复选框，还是选中时没有取消选中？但如果我点击跨度区域，复选框将标记为选中或取消选中

这是我的小提琴

我猜你试图在点击事件中克服引导模式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/

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

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

不幸的是，JQuery并不容易解决这个问题，而是不得不切换到其他方式。

最后angularjs解决了这个问题。

试着检查ng。

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

js：就像一样设置为true

$scope.checked = 'true';
相关文章：