Question

我有两个单选按钮，表格如下

<input type="radio" name="advice" value="office" class="office">
<input type="radio" name="advice" value="phone">

当我选择office单选按钮时，我想显示一个弹出窗口。使用以下脚本

完全正常

$(function () {
    $('.office').click(function (e) {
        e.preventDefault();
        var dialog = $('<p>Please be aware that our office is located at ABC.</p>').dialog({
            buttons: {
                "Close": function () {
                    dialog.dialog('close');
                }
            }
        });
    });
});

我遇到的问题是，虽然选择单选按钮office弹出窗口但是单选按钮实际上没有被选中。单选按钮中的DOT保留在另一个单选按钮内，因此在提交表单时，我会继续获取相同单选按钮的值。

我真的很感激任何帮助。

Answer 1

当收音机框改变然后对话框打开时，

使用 change event 现在当您单击对话框打开但由于未在更改事件中打开而未选中时

$(function () {
    $('.office').change(function (e) {
        e.preventDefault();
        var dialog = $('<p>Please be aware that our office is located at ABC.</p>').dialog({
            buttons: {
                "Close": function () {
                    dialog.dialog('close');
                }
            }
        });
    });
});

Answer 2

只需删除e.preventDefault()，Here's a fiddle

即可

Answer 3

我认为你应该在change

的地方使用click

或者您只需删除e.preventDefault();

$(function () {
  $('.office').change(function (e) {
    var dialog = $('<p>Please be aware that our office is located at ABC.</p>').dialog({
      buttons: {
       "Close": function () {
         dialog.dialog('close');
       }
     }
    });
  });
});

Answer 4

只需使用jQuery .change()事件，无需为此烦恼。

$('.office').change(function (e) {
   ....
}

Answer 5

使用更改功能。点击将无法在此方案中使用。

选中 Fiddle

<强> HTML

<input type="radio" name="advice" value="office" class="office">Office
<input type="radio" name="advice" value="phone" class="phone">Phone
<div id="dialog_content"></div>

<强>的jQuery

$(function () {
    var dialog = $('#dialog_content').dialog({
            buttons: {
                "Close": function () {
                    dialog.dialog('close');
                }
            }
        });

         dialog.dialog('close');

    $('.office').change(function (e) {
        dialog.dialog('close');
        $('#dialog_content').html('<p>Please be aware that our office is located at ABC.</p>');
        dialog.dialog('open');
    });

    $('.phone').change(function (e) {
        dialog.dialog('close');
        $('#dialog_content').html('<p>This is Phone dialog.</p>');
        dialog.dialog('open');
    });
});

选择单选按钮以显示弹出窗口并保持选中状态

5 个答案: