JQuery dialog box radio button value not staying after clearly being selected

I have a simple radio button to pick hair color. I decided to use Jquery and turn it into a "controlgroup" so I could make it look nicer than just a regular radio button list.

<div id='hair-hunch-click' class='hunch-click'>Hair Color
                    <div id='hair-dialog' class='hunch-dialog'>
                    <div id='haircolor'>
                    <div id='haircolor-boxes'>
                    <input type='radio' id='bald' class='inputfield' name='hair' value='Bald' />
                    <label for='bald' class='hair-bald'>Bald<br/></label>
                    <input type='radio' id='black' class='inputfield' name='hair' value='Black'  />
                    <label for='black' class='hair-black'>Black<br/></label>
                    <input type='radio' id='blonde' class='inputfield' name='hair' value='Blonde' />
                    <label for='blonde' class='hair-blonde'>Blonde<br/></label>
                    <input type='radio' id='hair-brown' class='inputfield' name='hair' value='Brown' />
                    <label for='hair-brown' class='hair-brown'>Brown<br/></label>
                    <input type='radio' id='red' class='inputfield' name='hair' value='Red' />
                    <label for='red' class='hair-red'>Red<br/></label>
                    </div>
                    </div>
                    </div>
                    </div>



   $(function() {
      $( "#haircolor" ).controlgroup();
   });

I got that working. I then decided I'd like that radio button control group to be in a jquery "dialog" that pops up.

$( function() {
      $( ".hunch-dialog" ).dialog({
        autoOpen: false,
      resizable: false,
      modal: true,
        show: {
          effect: "blind",
          duration: 500
        },
        hide: {
          effect: "explode",
          duration: 100
        },
      open: function(){
              jQuery('.ui-widget-overlay').bind('click',function(){
                  jQuery('.hunch-dialog').dialog('close');
              })
          }
      });

    $( "#hair-hunch-click" ).on( "click", function() {
    var thehair=$('input[name=hair]:checked').val();
    alert(thehair);
        $( "#hair-dialog" ).dialog( "open" );
      });
    });

Works fine also. You select "red" and then in the HTML (when inspecting), the "label" for the red option gets the class "ui-checkboxradio-checked".

However, in testing, I tried this radio button control group dialog inside a larger form that posts to another page and I noticed that the selected option in the hair color dialog was NOT passing properly.

So I setup a fiddle to (hopefully) help show what I mean. I added an alert to display the current value of the hair color radio button.

• When you first run it, it's undefined, as it should be.

• Then choose one of the options (say "Blonde"), close the dialog, and run it again.

• The value of the hair color radio button still shows as "undefined. Why does it not retain and display "Blonde"?!?

Is there a problem with using radio control groups in a dialog box, or do I just have something setup improperly? (likely the latter)

Somewhat related side question: I mentioned how the inspected HTML shows that the "label" element gets a class of "ui-checkboxradio-checked". Why doesn't the "input" element that goes with the label get the "checked" attribute (i.e. the "normal" way radio buttons are marked as being checked)?

Here's the jfiddle: http://ift.tt/2mk0Mdu