title: Selecting a radio button to display a popup and stay selected as well
body: <p>I have two radio buttons as following in a form</p>
  
  <pre><code>&lt;input type="radio" name="advice" value="office" class="office"&gt;
  &lt;input type="radio" name="advice" value="phone"&gt;
  </code></pre>
  
  <p>When i select the <code>office</code> radio button, I want to display a popup. This is working perfectly fine using the following script</p>
  
  <pre><code>$(function () {
      $('.office').click(function (e) {
          e.preventDefault();
          var dialog = $('&lt;p&gt;Please be aware that our office is located at ABC.&lt;/p&gt;').dialog({
              buttons: {
                  "Close": function () {
                      dialog.dialog('close');
                  }
              }
          });
      });
  });
  </code></pre>
  
  <p>The problem I am having is although on selecting the radio button <code>office</code> popup appears but the radio button is actually not getting selected. The DOT in radio button remains inside the other radio button, so on submitting the form i keep getting the value of same radio button.</p>
  
  <p>I will really appreciate any help.</p>