从选择中引导模式停止复选框

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') 吗？