2013-03-11 2 views
1

У меня проблема, когда я хочу запомнить отмеченный переключатель в диалоговом окне диалога jQuery UI.jQuery Dialog Setting Radio Checked Issue

Я столкнулся с каким-то странным поведением, поэтому я издевался над ним в JSFiddle. Скрипка в основном случайным образом выбирает один из 3-х радиоприемников при его создании. Однако скоро люди перестанут работать.

Я пробовал с и без линии, которая делает removeAttr ('checked').

Вам нужно будет щелкнуть диалоговое окно открытия и закрыть его несколько раз, чтобы остановить его работу. Я тестировал это в последней версии Chrome.

http://jsfiddle.net/t8kN7/5/

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/

Просто удерживая нажатой кнопку RUN

+3

Вместо .attr («checked», «checked»); используйте функцию prop. .prop ("checked", true); - То же самое с removeAttr – tymeJV

+0

http://jsfiddle.net/t8kN7/9/ - использование пропозиции, похоже, решает проблему – Andy

ответ

4

Следуя за моим комментарием. Изменить экземпляры attr на опору

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

Мне никогда не нужно использовать опору до сегодняшнего дня, attr всегда служил мне хорошо. Но в этом случае это просто необходимо! :) Так много часов потрачено впустую, но спасибо за помощь! – Andy

1

Вы должны только создать диалог один раз.

В этом случае я предлагаю вам создать диалоговое окно сразу, но с параметром autoOpen, установленным на false.

В обработчик щелчка вы можете просто позвонить:

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

в этот момент она будет иметь такое же состояние, как когда вы закрыли его.

Очевидно, вы также должны удалить код для установки случайного состояния в обработчике open:.

+0

Я только что попробовал этот подход здесь: http://jsfiddle.net/t8kN7/7/ И я все еще получаю неожиданное поведение – Andy

+0

избавиться от случайного материала в обработчике 'open' - он вызывается каждый раз, когда диалог снова открывается. – Alnitak

+0

http://jsfiddle.net/t8kN7/10/ - только использование prop вместо attr решило его. Спасибо за ваш вклад в любом случае – Andy