驗證單選按鈕與JS confrim對話框

Question

我想禁用單選按鈕上的檢查事件。這是scanrio。

在一個單選按鈕組，如果button1被選中，並且用戶點擊button2用戶將看到一個JS確認對話框中，如果用戶點擊OKbutton2將被檢查，如果在用戶點擊取消先前檢查按鈕Button1將保持檢查。

這是我試過的。

<form id="myForm"> 
<input type="radio" checked="true" name="radioName" onclick="setData(this)" value="1" /> 1 <br /> 
<input type="radio" name="radioName" onclick="setData(this)" value="2" /> 2 <br /> 
<input type="radio" name="radioName" onclick="setData(this)" value="3" /> 3 <br /> 
</form> 

function setData(ctrl) 
{ 
    var r = confirm("The selected option contains data, unchecking this option will delete this data. Do you want to continue ?"); 
     if (r == true) { 
     // clicked Radio button gets checked 
     } else { 
     // perviously checked button remains checked 
     return false; 
     } 
    } 

但我無法達到預期的效果。 這裏是小提琴：http://jsfiddle.net/RhnvU/5547/

Answer 1

你所試圖做的是正確的，但在你的onclick處理程序，你應該調用函數與return，因爲你將返回false櫃面的用戶按下-取消。

嘗試是這樣的 -

onclick="return setData(this)" 

這裏是更新的小提琴 - http://jsfiddle.net/RhnvU/5550/

Answer 2

試試這個

function setData(ctrl) { 
    var r = confirm("continue?"); 

    if (r == true) { 
    // clicked Radio button gets checked 
    } else { 
    // perviously checked button remains checked 
    event.preventDefault(); 
    return false; 
    } 
} 

Answer 3

我建議的，與其.click()，使用onmousedown事件。這是因爲它將在更改單選按鈕的值之前做出決定，而不是在已由click設置該值之後做出決定。

所以HTML代碼變爲：

<input type="radio" checked="true" name="radioName" onmousedown="setData(this)" value="1" /> 

和JS文件，只需使用基於選擇的價值.checked屬性：

if (r == true) { 
     ctrl.checked = true; 
     // clicked Radio button gets checked 
     } else { 

     return false; 
     } 

這裏是工作fiddle

詳細說明： 它會做什麼是fol降低：

1. 當你點擊一個單選按鈕時，它將觸發onmousedown事件。
2. onmousedown事件處理程序將檢查您是否點擊了「確定」或「取消」。
3. 如果是「確定」，它將檢查單選按鈕的新值。
4. 如果是「取消」，它將什麼也不做，所以單選按鈕的舊值保持不變。

Answer 4

'e.keycode == 32' is used to trigger the same event in case of space key press. Hope this helps. 

$('.button1').on('click keyup' , function(e){ 
        if(e.keyCode == 32 || e.type=="click"){ 
         //show your Dialog or pop-up 
         $('.popup').show(); 
         $('#proceed').click(function(){ 
          selectradioButton1(); 
         }); 
         $('#cancel').click(function(){ 
          $('.popup').hide(); 
         }); 
        } 
       }); 
    $('.button2').on('click keyup' , function(e){ 
        if(e.keyCode == 32 || e.type=="click"){ 
         selectradioButton2(); 
        } 
       }); 

    function selectradioButton1() { 
     $('#radiobtn1').attr('checked', true); 
     $('#radiobtn2').attr('checked', false); 
    } 

    function selectradioButton1() { 
     $('#radiobtn2').attr('checked', true); 
     $('#radiobtn1').attr('checked', false); 
    }