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

Selecting a radio button to display a popup and stay selected as well

本文关键字：状态 窗口 单选按钮 显示 选择      更新时间：2023-09-26

在表单

中有如下两个单选按钮
<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在单选按钮中保留在另一个单选按钮中，因此在提交表单时，我一直获得相同的单选按钮的值。

use change event by this当单选框改变时，对话框打开但是现在当你点击对话框打开但没有被选中因为它在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');
                }
            }
        });
    });
});

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

我认为你应该用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');
       }
     }
    });
  });
});

只需使用jQuery .change()事件，无需担心。

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

使用更改功能。点击在这种情况下不起作用。

检查提琴

<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');
    });
});
相关文章：