从 select 框中显示确认删除框

Question

我有这个表格来管理一篇文章。在 'action' 中，我 select 文章并选择批准、存档或删除。来自 select 框。然后我点击接受按钮。

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 确认模态 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 和 select 一篇文章后，我需要显示确认模式框。

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

JSFIDDLE DEMO

Answer 1

您需要做的是监听 select 更改事件。

你可以试试这样的

$('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 的 link 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 因为我假设如果两个条件都不满足你想做其他事情。

这里是 JSFIDDLE 展示它的实际效果。

希望这对您有所帮助。

从 select 框中显示确认删除框

show confirm delete box from select box

javascript

css

jquery

twitter-bootstrap