停止单选按钮更改，显示弹出窗口，然后更改单选按钮

Question

我想要做的是阻止用户更改单选按钮，直到他们确认他们想要离开“页面”。单选按钮不应更改为他们单击的那个，直到他们单击弹出窗口中的按钮说“确定离开页面”。

此调用处理将页面更改为选定的单选按钮以及其他所有内容。仅当单击弹出窗口中的按钮时才应触发：

$("body").on("change", "input[type='radio'][name='quote-type']:checked", function(e){

//Change the radio button and everything else

});

这会处理弹出窗口和所有内容：

  $(function(){
    var LEAVEPAGE;
    //Radio button changes, so show a popup
    $("body").on("change", ".coverage-options-wrapper li:not(.custom) input[type='radio'][name='quote-type']", function(e){

         e.preventDefault();
         e.stopPropagation();
         LEAVEPAGE = e.currentTarget;

         //Show the popup to ask if you are sure you want to switch radio buttons

         });
    //Click the button in the popup to leave the page, so change the originally clicked radio button.
    $("body").unbind("click").on("click", ".leave-page", function(){

        $(LEAVEPAGE).prop("checked", true).trigger("change"); //triggers change for the first call to be run, to actually change the page

    });
});

发生的情况是单选按钮只是被更改了，它也显示了弹出窗口，但是它没有等待弹出窗口的响应。无论如何它只是切换。此外，当我单击.leave-page 按钮时，它会触发更改（假设它会加载归因于该按钮的新页面），但是它也会再次触发弹出窗口（因为它们都使用更改事件） .

我很困惑。

Answer 1

DEMO

JS

var optionTarget;

$(":radio").click(function(e){
   e.preventDefault();
   optionTarget = e.target;
   $("#leave-dialog").show(); 
});

$("#leave-dialog button").click(function(){
   $("#leave-dialog").hide();
});

$("#leave-btn").click(function(){
    $(optionTarget).prop('checked', true);
});

HTML

<input type="radio" name="bleh" value="yes" checked>option 1
<input type="radio" name="bleh" value="no">option 2
<div id="leave-dialog">Are you sure?
    <br/>
    <button id="leave-btn">Yes</button>
    <button>No</button>
</div>