Question

我正在尝试禁用单选按钮上的检查事件。这是扫描仪。

如果选中了button1，并且用户点击button2，用户会看到JS确认对话框，如果用户点击确定 button2，则会在广播组中将进行检查，如果用户点击取消，则会保留先前选中的按钮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调用函数，因为你将返回用户按下取消的错误。

尝试这样的事情 -

onclick="return setData(this)"

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

Answer 2

试试这个

<div class="inner cover" style="opacity:0;">1 Vertical Top</div>
<div class="inner cover" style="opacity:0.333;">2</div>
<div class="inner cover" style="opacity:1;">3 Vertical Middle</div>
<div class="inner cover" style="opacity:0.333;">4</div>
<div class="inner cover" style="opacity:0;">5 Vertical Bottom</div>
<div class="inner cover" style="opacity:0;">6 Below Vertical Bottom</div>
<div class="inner cover" style="opacity:0;">7 Below Vertical Bottom</div>
<div class="inner cover" style="opacity:0;">8 Below Vertical Bottom</div>
<div class="inner cover" style="opacity:0;">9 Below Vertical Bottom</div>

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

详细说明： 它将做的是以下几点：

当您点击单选按钮时，它将触发onmousedown事件。
onmousedown事件处理程序将检查您是否已点击＆＃34;确定＆＃34;或＆＃34;取消＆＃34;。
如果是＆＃34;确定＆＃34;，它将检查单选按钮的新值。
如果是＆＃34;取消＆＃34;，则无效，因此单选按钮的旧值保持不变。

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

使用JS confrim对话框验证单选按钮

4 个答案: