单击Button时,显示Popover-Bootstrap并勾选复选框?

时间:2016-07-20 09:52:36

标签: javascript jquery ajax twitter-bootstrap bootstrap-popover

我使用Popover Bootstrap在用户点击按钮时显示错误或警告"删除"。

  • 如果用户没有点击复选框并点击按钮=> Popover显示错误:"您应该选择一些记录!"
  • 如果用户单击复选框并单击按钮=> Popover show alert:"你确定吗?"

我将调用ajax删除此记录。

我的代码为:

stopAfterLoops:0,
stopAtSlide:1,

我该怎么做?

3 个答案:

答案 0 :(得分: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>

答案 1 :(得分:1)

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

答案 2 :(得分:1)

您可以使用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");
});