在复选框的更改事件上使用 jquery.confirm 函数

Question

我正在使用从 http://myclabs.github.io/jquery.confirm/

中获取的 jquery.confirm

Objective :- 我试图在选中和取消选中复选框时弹出一个带有不同文本的确认框。选中该复选框时，应弹出一个确认框，显示消息 "Are You Sure to add the media"，如果用户单击 "Yes I am"，我将发送相应的 ajax 调用以添加媒体并进行选中属性是的。取消选中该复选框时，应弹出确认信息，显示消息 "Are you Sure to delete the media"，如果用户再次选择 "Yes I am"，则会进行 ajax 调用以删除并选中属性设置为 false。

复选框是：

<input type="checkbox" id="media">

现在的问题是，虽然流程正常进行，但确认框在选中和取消选中复选框时显示相同的文本消息。

"Are You sure to add the media".

相反，它应该更改文本，因为 textMessage 在每次选中和取消选中时都会发生变化。这是我第一次使用确认框。

这是代码。

var textMessage=" to add the media?";
    $('#media').change(function() {
            //var checked=$(this).is(":checked");
            var me=this;
            $("#media").confirm({
                            title:"Confirmation",
                            text:"Are You Sure" + textMessage,
                            confirm: function(btn) {
                                if(textMessage === " to add the media"){
                                    $(me).prop("checked", true);
                                    mediachecked=false;
                                    textMessage=" to delete the media?";
                                    //Making the ajax calls for addition                                                          
                                    }
                                else{
                                    $(me).prop("checked",false);
                                    mediachecked=true;
                                    textMessage=" to add the media?";
                                    //Making the ajax calls for deletion
                                    }
                            },
                            cancel: function(btn) {
                            },
                             confirmButton: "Yes I am",
                             cancelButton: "No"
                            });
        });

在此先感谢您的帮助。

Answer 1

好的，我想我明白了。 jQuery.confirm 希望您将事件附加到按钮（或您的情况下的复选框）。按照您的操作方式，您应该使用手动触发方法。无论如何，我能够在不修改太多代码的情况下让它工作：

//The checkbox. Notice the data attribute that will hold the confirm text message
<input type="checkbox" id="media" data-text="Are you sure you want to add the media?" />

下面是 jQuery 代码（为简洁起见进行了删减）。而不是监听复选框的 change 事件，并且每次都重新附加确认事件监听器（这是你的代码的问题），你应该立即将确认事件监听器附加到复选框然后使用某种方法更改确认对话框文本。我使用 data- 属性来存储文本，jQuery.confirm 会自动将其用作提示文本。见以下代码：

//Notice the btn.data(...) call to change value of 'data-text'...
$("#media").confirm({
    title:"Confirmation",
    confirm: function(btn) {
        if(!btn.is(":checked")){
            btn.prop("checked", true);
            btn.data("text","Are you sure you want to delete the media?");
            //Making the ajax calls for addition                                                          
        }else{
            btn.prop("checked",false);
            btn.data("text","Are you sure you want to add the media?");
            //Making the ajax calls for deletion
        }
    },
    cancel: function(btn) {},
    confirmButton: "Yes I am",
    cancelButton: "No"
});

在复选框的更改事件上使用 jquery.confirm 函数

Using the jquery.confirm function on change event of checkbox

html

javascript

checkbox

jquery

confirmation