Question

我正在尝试在用户尝试取消选择选项时添加JavaScript确认消息。

如果用户在确认屏幕上选择取消，则复选框应保持勾选状态。我遇到的问题是，即使我返回false，复选框也会被取消选中。

HTML

<div class="ServiceDesc Alternate">    
    <span class="expandable">
        <input id="ctl01_chk" type="checkbox" name="ctl01$chk" checked="checked">
    </span>                
</div>

JQuery的

$(document).ready(function () {
        //each load to persist state
        $('.expandable').each(function () {
            ToggleCheckboxes($(this),false);
        });
        $('.expandable').click(function () {
            ToggleCheckboxes($(this),true);
        });
    });
    //toggle child checkbox show/hide
    function ToggleCheckboxes(checkboxSpan, showConfirm) {
        if (checkboxSpan.find(':checked').length > 0) {
            checkboxSpan.parent().find('.indent').show();
        }
        else {
            if (showConfirm) {
                var answer = confirm("Are you sure?");
                if (answer) {
                    checkboxSpan.parent().find('.indent').hide();
                }
                else {
                    return false;
                }
            }
            else {checkboxSpan.parent().find('.indent').hide();}
        } 
    }

Answer 1

最简单的方法

$("#ctl01_chk").click(function() {
    if(confirm("Are you sure?")) { 
           // continue;
    } else { 
       return false;
    } 
});

Demo

Answer 2

您需要使用preventDefault()而不是返回false ...您可以将event传递给显示确认的函数

$(document).ready(function () {
    //each load to persist state
    $('.expandable').each(function () {
        ToggleCheckboxes($(this),false);
    });
    $('.expandable').click(function (event) {
        ToggleCheckboxes($(this),true,event);
    });
});
//toggle child checkbox show/hide
function ToggleCheckboxes(checkboxSpan, showConfirm,event) {
    if (checkboxSpan.find(':checked').length > 0) {
        checkboxSpan.parent().find('.indent').show();
    }
    else {
        if (showConfirm) {
            var answer = confirm("Are you sure?");
            if (answer) {
                checkboxSpan.parent().find('.indent').hide();
            }
            else {
                event.preventDefault();
            }
        }
        else {checkboxSpan.parent().find('.indent').hide();}
    } 
}

Working example here

Answer 3

您应该将click eventObject传递给您的函数，以便您可以执行

e.preventDefault();

这是update

Answer 4

您在自定义函数中返回false，但不在分配给click事件的函数内。只需修复以下行：

$('.expandable').click(function () {
    return ToggleCheckboxes($(this),true);
});

复选框确认消息 - 如果为false则保持检查状态

4 个答案:

最简单的方法

Demo