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

show confirm delete box from select box

本文关键字：删除 选择 确认 显示      更新时间：2023-09-26

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

.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>

我添加了一个引导程序确认模式引导程序，如下所示：

$('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 和引导模式框创建此行为？

JSFIDDLE 演示

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

你可以尝试这样的事情

$('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/

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

$('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框的值是否为"删除"，并且check boxes之一是否checked如果同时满足两个条件，则得到modal dialog，我添加了else，因为我假设如果两个条件都不满足，您想做其他事情。

这是一个JSFIDDLE，显示了它的实际效果。

希望这有帮助。

相关文章：