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

Question

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

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

代码示例可以在这里找到http://jsfiddle.net/Amjzv/

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);
});