Question

我有这个表格来管理一篇文章。在“操作”中，我选择文章并选择批准，存档或删除。从选择框中。然后我点击接受按钮。

HTML：

<form action="#" method="POST">
    <select class="form-control contentgroup input-sm" name="action" id="action">
        <option value=""></option>
        <option value="addtoarchive">Archive</option>
        <option value="removefromarchive">approve</option>
        <option value="delete">Delete</option>
    </select>
    <br>
    <input type="checkbox" name="selectedposts[]" class="check" value="240" />Article 1
    <br>
    <input type="checkbox" name="selectedposts[]" class="check" value="241" />Article 2
    <br>
    <input type="checkbox" name="selectedposts[]" class="check" value="242" />Article 3
    <br>
    <input type="checkbox" name="selectedposts[]" class="check" value="243" />Article 4
    <br>
    <button class='btn btn-danger btn-xs' type="submit" name="remove_levels" value="delete"><span class="fa fa-times"></span> delete</button>
</form>
<div id="confirm" class="modal hide fade">
    <div class="modal-body">Are you sure?</div>
    <div class="modal-footer">
        <button type="button" data-dismiss="modal" class="btn btn-primary" id="delete">Delete</button>
        <button type="button" data-dismiss="modal" class="btn">Cancel</button>
    </div>
</div>

我添加了一个像这样的bootstrap确认模态引导程序：

$('button[name="remove_levels"]').on('click', function (e) {
    var $form = $(this).closest('form');
    e.preventDefault();
    $('#confirm').modal({
        backdrop: 'static',
        keyboard: false
    })
        .one('click', '#delete', function (e) {
        $form.trigger('submit');
    });
});

这适用于接受按钮，但Only选择delete并从列表中选择文章后，我需要显示确认模式框。

如何使用jQuery和bootstrap模式框创建此行为？

JSFIDDLE DEMO

Answer 1

您需要做的是听取选择更改事件。

你可以试试这样的事情

$('select[name="action"]').on('change', function (e) {
var $form = $(this).closest('form');
var checked = $( "input:checked" ).length;  

e.preventDefault();

if($(this).val()==="delete" && checked) {
    $('#confirm').modal({
      backdrop: 'static',
      keyboard: false
    })
      .one('click', '#delete', function (e) {
       $form.trigger('submit');
    });
  }
});

这是jsfiddle的链接 http://jsfiddle.net/dh0g6cge/

Answer 2

我认为通过查看评论，这就是你所追求的。

$('button[name="remove_levels"]').on('click', function (e) {
    var $form = $(this).closest('form');
    e.preventDefault();
    if($("#action").val() == "delete" && $(".check").is(":checked")){
        $('#confirm').modal({
            backdrop: 'static',
            keyboard: false
        })
            .one('click', '#delete', function (e) {
            $form.trigger('submit');
        });
    }else{
        //Do Something else if a different "select" option is selected or
        //a checkbox isnt checked        
    }
});

if条件语句检查select框的值是否为“delete”，如果满足两个条件，check boxes中的checked之一是modal dialog那么你得到了else并且我添加了{{1}}，因为我认为如果不满足这两个条件，您想要做其他事情。

这是JSFIDDLE显示它的实际效果。

希望这有帮助。

从选择框中显示确认删除框

2 个答案: