Javascript 如何为引导模式窗口指定主要和次要操作？

我正在使用。当有人在我的表单上单击submit时，我正在测试他们是否已选中任何可用选项：

$('form').submit(function(event) {
        var $target = $('.column').find(':checkbox');                                                        
        if( !$target.is(':checked') ){ // if none of the sub-options are checked
            event.preventDefault();
            $('#my-modal').modal({
                show: 'true',
                backdrop: 'true',
                keyboard: 'true'
            });
        }                                       
    });

。。。如果没有，则显示模式窗口。然后，我希望模态上的“主”按钮继续表单提交，而次按钮只是关闭模态窗口

我相信这应该是很容易做到的，但我目前对jQuery的了解仅限于复制/粘贴级别，文档中没有给出如何做到这一点的示例

我已经准备好了一堆我所拥有的东西——谢谢

编辑-我在下面添加了一些代码（感觉有点粗糙），当单击辅助按钮时，这些代码将关闭模式窗口。仍然不确定在单击主按钮时如何让表单继续：

$('#my-modal .secondary').click(function() {
    $('#my-modal').modal({
        show: 'false'
    });
});

---

现在的问题归结为：“单击主按钮后，是否有一种简单的方法告诉表单“好的，继续”呢？”

好的，问题是现在引导没有任何适当的回调操作按钮。因此，您必须以一种迂回的方式来完成这项工作，并创建自己的。希望这有帮助

下面是一个JS小提琴，展示了它的工作原理：

代码如下：

HTML文件

<form>
<ul class="inputs-list">
    <li>
      <label>
        <input type="checkbox" name="optionsCheckboxes" value="option1" />
        <span>Option 1</span>
      </label>
    </li>
    <li>
      <label>
        <input type="checkbox" name="optionsCheckboxes" value="option2" />
        <span>Option 2</span>
      </label>
    </li>
</ul>
<div class="actions">
    <a href="#" class="save-button btn large primary">Save changes &raquo;</a>

    <!-- Hide the real submit button /-->
    <input type="submit" class="hidden">
</div>
</form>

<div id="my-modal" class="modal hide fade">
    <div class="modal-header">
        <a href="#" class="close">&times;</a>
        <h3>Are you sure?</h3>
    </div>
    <div class="modal-body">
        <p>You haven&rsquo;t selected any options.</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="okay-button btn primary">Okay &raquo;</a>
        <a href="#" class="go-back-button btn secondary">Go back</a>
    </div>
</div> <!-- /modal -->

$(document).ready(function() {

    // Verify if checkboxes were checked.
    // If they weren't, show a modal
    $('a.save-button').click(function() {
        if ($("input:checked").length === 0) {

            $('#my-modal').modal({
                show: 'true',
                backdrop: 'true',
                keyboard: 'true'
            });
        } else {
            $('form').submit(); 
        }

        // prevent click jump
        return false;
    });

    // Let's attach a listener on form submission
    $('form').submit(function() {
        alert('We submitted the form!');
    });

    // Hide modal if "Go back" is pressed
    $('#my-modal .go-back-button').click(function() {
        $('#my-modal').modal('hide');
        alert('We went back to the form');
    });

    // Hide modal if "Okay" is pressed
    $('#my-modal .okay-button').click(function() {
        $('#my-modal').modal('hide');
        $('form').submit();
    });

});

我还添加了一些CSS：

ul.inputs-list li {
    margin-left: 10px;
}
.hidden {
    display: none   
}

---

我不喜欢“伪造”表单提交，但希望Bootstrap的v2.0版将包括适当的回调，这将缓解我反对的OCD部分。在那之前，这正是我所需要的-谢谢。是的，我支持你的观点。Bootstrap是一个很好的基础，但仍然缺乏一定的功能。很高兴看到布尔值不是字符串。您想要的是

false

而不是

“false”

（注意引号）。您输入的方式“false”实际上计算为

true

。