我有这个表格来管理一篇文章。在“操作”中,我选择文章并选择批准、存档或删除。从选择框中。然后我点击接受按钮。
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');
});
});
这适用于接受按钮,但仅
在我选择删除
并从列表中选择一篇文章后,我需要显示确认模式框。
如何使用 jQuery 和 Bootstrap 模式框创建此行为?
最佳答案
您需要做的是监听 select change 事件。
你可以试试这样的东西
$('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/
关于javascript - 从选择框中显示确认删除框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27759280/