Question

我有一个问题，我想在jQuery UI对话框弹出窗口中记住选中的单选按钮。

我遇到了一些奇怪的行为，所以我在JSFiddle中嘲笑它。小提琴基本上随机选择3个无线电选择中的一个。然而很快就会停止工作。

我尝试过使用和不使用removeAttr（'checked'）的行。

您需要单击打开的对话框并多次关闭它才能看到它停止工作。我一直在最新版本的Chrome中对此进行测试。

HTML

<div id="dialog" style="display:none;">

<input type="radio" class="left" name="rentFrequency" value="1" />
<span class="left">&#160;Monthly&#160;&#160;&#160;</span>

<input type="radio" class="left" name="rentFrequency" value="2" />
<span class="left">&#160;Quarterly&#160;&#160;&#160;</span>

<input type="radio" class="left" name="rentFrequency" value="3" />
<span class="left">&#160;Annualy&#160;&#160;&#160;</span>                                

</div>

<input type="button" name="dialogOpen" value="Open Dialog" />
<input type="text" name="randVal" value="" readonly="readonly" />

的Javascript

$(document).ready(function() {

$('input[name="dialogOpen"]').click(function(){
    $("#dialog").dialog({
        title: 'Additional Tenancy Information',
        resizable: false,
        width: 530,
        show: { effect:'fade', duration:500 },
        hide: { effect:'fade', duration:400},           
        modal: true,
        close: function (event, ui) {
        },
        open: function (event, ui) {
            var randval=Math.floor(Math.random()*3)+1
            console.log(randval); 
            $('input[name="randVal"]').val(randval);
            $('input[name="rentFrequency"]').removeAttr('checked');
            $('input[name="rentFrequency"][value="'+randval+'"]').attr('checked', 'checked');
        }
    });
});
});

这实际上是没有对话框弹出窗口的相同代码，它的行为符合预期：

http://jsfiddle.net/W6rFh/1/

只需点击“运行”

即可

Answer 1

跟进我的评论。将attr实例更改为prop

$('input[name="randVal"]').val(randval);
$('input[name="rentFrequency"]').prop("checked", false);
$('input[name="rentFrequency"][value="'+randval+'"]').prop("checked", true);

Answer 2

您应该只创建一次对话框。

在这种情况下，我建议您立即创建对话框，但autoOpen属性设置为false。

在点击处理程序中，您只需调用：

$('#dialog').dialog('open');

此时它将与关闭时的状态相同。

显然你也应该删除代码以在open:处理程序中设置随机状态。

jQuery对话框设置无线电检查问题

2 个答案: