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>

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

1 个答案: