如何在 JavaScript/jQuery 中弹出模式并运行复选框检查？答案

【问题标题】：How does one pop up a modal AND run a checkbox check in JavaScript/jQuery?如何在 JavaScript/jQuery 中弹出模式并运行复选框检查？
【发布时间】：2014-09-19 05:22:26
【问题描述】：

我需要回答一个问题，老实说，这与this one 几乎完全相同。唯一的区别是，我没有显示 JS 警报，而是尝试使用 Bootstrap 3.1.1 显示模式。

这是我目前所拥有的相关代码：

HTML

<!DOCTYPE HTML>
<form id="aForm" method="post" action="">
    ...
    <p class="alert alert-error alert-danger" id="errorMsg" style="display:none;">You must check the checkbox!</p>
    <label class="checkbox"><input type="checkbox" id="theChkbox" required="required" />Click the box.</label>
    <button id="clickButton" class="btn" type="button" onclick="submitCheck('theChkbox','errorMsg');">Click</button>
   ...
    <div class="modal" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                    <h4 class="modal-title">Modal Title</h4>
                </div>
                <div class="modal-body">
                    <!-- Content here -->
                </div>
                <div class="modal-footer">
                    <button type="button" onclick="submitModal()" class="btn">Click Me</button>
                </div>
            </div>
        </div>
    </div>
    ...
</form>

JavaScript

function submitCheck(chkbox,error) {
    if (document.getElementById(chkbox).checked == false) {
        document.getElementById(error).style.display = "block";
    } else {            
        window.location.href = "#myModal";
    }
}

现在，必须选中复选框的条件必须存在，并且只有在选中并按下按钮时才应该弹出模态框。

欢迎任何建议。说真的，这让我发疯了！ >.

【问题讨论】：

@j08691 你为什么编辑我的问题？
我不知道为什么我的评论被删除了，但为了回答你的问题，我修复了你的标签并删除了多余的文字。
奇怪，不知道你能做到。另外，我没有删除评论。不知道它是如何被删除的。奇数：/
这是 SO 魅力的一部分。任何人几乎都可以编辑任何东西（只要你有代表——强大的力量会带来一些东西，我忘记了细节）。无论如何，我并不是要暗示你删除了评论。
哈哈，你没有。都好。 :D

标签： javascript jquery twitter-bootstrap checkbox modal-dialog

【解决方案1】：

我猜你有 JQuery...

这是一个 JSFiddle，可能会向您展示如何使用 bootstrap 进行操作：JSFIDDLE

// everytime the button is pushed, open the modal, and trigger the shown.bs.modal event
$('#openBtn').click(function () {
    $('#modal-content').modal({
        show: true
    });
});

HTML

<a href="#" class="btn btn-default" id="openBtn">Open modal</a>

<div id="modal-content" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h3>Modal header</h3>
            </div>
            <div class="modal-body">
                <p>
                    <input type="text" id="txtname" />
                </p>
            </div>
            <div class="modal-footer"> 
                <a href="#" class="btn" data-dismiss="modal">Close</a>
                 <a href="#" class="btn btn-primary">Save changes</a>
            </div>
        </div>
    </div>
</div>

【讨论】：

让我试试这个，如果可行，我会将其标记为已解决。 :D
呃，实际上我注意到你没有勾选复选框。这并不能完全回答这个问题。对不起。
我的工作不是为你编写整个代码； - ) 否则，我不会帮你的
问题：既然这段代码存在于.NET环境中，那么a标签是否在服务器级别运行是否重要？ (runat="server")
没关系，只要你的HTML（查看源代码）对你的JQuery来说状态良好