javascript - Bootstrap 模式停止复选框选择

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