单击 Button 时，显示 Popover-Bootstrap 并选中复选框？

Question

我正在使用 Popover Bootstrap 在用户单击按钮 "Delete" 时向他们显示错误或提醒。

如果用户没有点击复选框和点击按钮 => 弹出窗口显示错误："You should choose some records !"
如果用户单击复选框并单击按钮 => 弹出窗口显示警报："Are you sure ?"

我会打电话给 ajax 删除这条记录。

我的代码为：

<script>

$(document).ready(function(){
if('#btn-delete').click(function(){
var isChecked = $('#ckbox').attr('checked') ? true : false;
if(isChecked==false)
{
$(this).popover({
title:'Alert',
content:'You should choose some records !',
html:true,
trigger:'focus'
return false;
})
else if(isChecked==true)
{
$(this).popover({
title:'Alert',
content:'Are you sure ?',
html:true,
// in here , i want to add button in popover like "Ok" , and then call AJAX 
}
}
})
    });


</script>

<html>
<body>
<div class="row">
<button type="button" id="btn-delete">Delete</button>

</div>
<table>
<thead>
<tr>
<th><input type="checkbox" id="checkall"/></th>
<th>ProductId</th>
<th>ProductName</th>
<th>ProductCat</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" id="ckbox"/></td>
<td>1</td>
<td>prod001</td>
<td>5</td>
</tr>
<tr>
<td>2</td>
<td>prod002</td>
<td>4</td>
</tr>
<tr>
<td>3</td>
<td>prod003</td>
<td>7</td>
</tr>
</tbody>

</table>

</body>
</html>

我该怎么做？

Answer 1

<script>

$(document).ready(function(){
if('#btn-delete').click(function(){
var isChecked = $('#ckbox').attr('checked') ? true : false;
if(isChecked==false)
{
$(this).popover({
title:'Alert',
content:'You should choose some records !',
html:true,
trigger:'focus'
return false;
})
else if(isChecked==true)
{
$(this).popover({
title:'Alert',
content:'Are you sure ?',
html:true,
 if (confirm('Are you sure you want to delete this?')) {
        $.ajax({
            url: 'myUrl',
            type: "POST",
            data: {
                // data stuff here
            },
            success: function () {
                // does some stuff here...
            }
        });
    }
})
}
}

    });


</script>

Answer 2

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
    body
    {
        font-family: Arial;
        font-size: 10pt;
    }
</style>
</head>
<body>
<label for="chkPassport">
    <input type="checkbox" id="chkPassport" />
    Do you have Passport?</label>
<br />
<br />
<input type="button" id="btnCheck" value="Check" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#btnCheck").click(function () {
            var isChecked = $("#chkPassport").is(":checked");
            if (isChecked) {
                alert("CheckBox checked.");
            } else {
                alert("CheckBox not checked.");
            }
        });
    });
</script>
</body>
</html>

Answer 3

您可以使用 SweetAlert 它更强大，让您有机会执行您的功能。示例：

swal({
    title: "Are you sure?",
    text: "You will not be able to recover this imaginary file!",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes, delete it!",
    closeOnConfirm: false
}, function () {
    /*YOUR FUNCTION HERE*/
    swal("Deleted!", "Your imaginary file has been deleted.", "success");
});

单击 Button 时，显示 Popover-Bootstrap 并选中复选框？

When Button clicked, show Popover-Bootstrap and check checkbox is checked?

javascript

jquery

ajax

twitter-bootstrap

bootstrap-popover