如何取消用户的单选按钮选择,在确认对话框后取消选择

How can I cancel a users radiobutton selection, after a confirm dialog cancel selection?

本文关键字:取消 选择 确认 对话框 单选按钮 何取消 用户      更新时间:2023-09-26

在一个更大的项目中,我有一组单选按钮,用于更新文本区域中的文本。然而,有时我需要让用户选择他们是否真的想要更改文本。

我使用隐藏单选按钮,只显示标签。我已经能够显示确认对话框,并防止文本区域中的文本更改,但我无法阻止单选按钮检查新单击的元素。我试图保存对先前选中的单选按钮的引用,但我怀疑它在代码中已经太迟了。为了进一步说明,我制作了一个JSFiddle。按钮文本和该区域的文本之间永远不应该不匹配,一旦一个已经加载。

http://jsfiddle.net/e0bxnghc/1/

那么有没有办法取消用户对单选按钮的选择呢?

HTML:

<nav id="selectors" class="segmented-button">
    <input type="radio" name="group-1" value="car" id="radio1">
    <label for="radio1" class="first">Car</label> 
    <input type="radio" name="group-1" value="boat" id="radio2">
    <label for="radio2">Boat</label> 
    <input type="radio" name="group-1" value="plane" id="radio3">
    <label for="radio3">Plane</label> 
    <input type="radio" name="group-1" value="train" id="radio4">
    <label for="radio4" class="last">Train</label> 
</nav>
    <textarea id="output">output area</textarea>
javascript:

 $(document).ready(function(){
    $('#selectors label').click(function() {    
        var element = $(this).prev();
        var confirmed = false;
        var previousSelected =  $("input[name=group-1]:checked");
        var r = confirm("Are you sure you want to change the text?");
        if (r == true) {
            $("#output").val(element.val());
        } else{
            previousSelected.checked = true;
        }
    });
});

在else中返回false应该这样做:

else{
        previousSelected.checked = true;
        return false;
}
<<p> jsFiddle例子/strong>

简单地从单选按钮单击事件返回'false'回滚操作。我们不需要保存之前选择的单选按钮。浏览器为我们做了这些:

$(document).ready(function () {
        $('input[name=Group]').click(function () {
            var confirmation = confirm('Are you sure you want to change the default message?');
            if (!confirmation) {
                return false;
            }
        })
    });