Question

我的页面底部有一个复选框。当用户点击它时，我想要一个弹出窗口显示。一切都有效，除了复选框的切换。当我使用下面的代码单击该复选框时，会出现弹出窗口，但框不会检查。知道为什么吗？

jQuery：

$('#confirm-final').on('show.bs.modal', function (e) {
    $(this).find('.danger').attr('href', $(e.relatedTarget).data('href'));
});

复选框：

<label class="checkbox-inline"><asp:CheckBox ID="chkFinalSubmission" runat="server" data-toggle="modal" data-target="#confirm-final"/>Final Submission</label>

弹出窗口：

<div class="modal fade" id="confirm-final" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            Final Submission
        </div>
        <div class="modal-body">
            If you check final submission and submit this ad note, <strong>you will not be able to change it anymore.</strong> It will be permanently stuck in readonly mode.
        </div>
        <div class="modal-footer">
            <asp:Button ID="btnConfirmFinal" runat="server" Text="Got it" class="btn btn-default" data-dismiss="modal"/>
        </div>
    </div>
</div>

Answer 1

至于原因，为打开模态而触发的事件包含e.preventDefault()，它通过单击模态调用元素来取消可能发生的任何事件。如果它是一个链接，则不会跟踪href，而是打开模态。如果是复选框，则取消实际检查。这是内置行为，您无法阻止它。

如何解决：

在Bootstrap 3中，您可以访问触发模式的事件的relatedTarget属性。由于你的函数已经使用relatedTarget，我假设你确实使用了Bootstrap 3。您可以将以下规则添加到现有的jquery函数中：

$(e.relatedTarget).prop('checked', !$(e.relatedTarget).prop('checked'));

（这会将复选框设置为已经存在的'已检查'状态的反转，也就是每次单击时都会打开和关闭它。）

此外，您确定其余代码有效吗？您引用$(e.relatedTarget).data('href')，但您的复选框没有data-href。你的意思是data('target')吗？

Bootstrap模态停止复选框选择

1 个答案: