jQuery Checkbox Radio Issue with Cloned Dialogs

by Robin Wilson

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<div id="MainForm">
  <div id="dialog" title="Basic dialog">

    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>

    <h2>Checkbox</h2>

    <fieldset>

      <legend>Hotel Ratings: </legend>
      <label for="checkbox-1">2 Star</label>
      <input type="checkbox" name="checkbox-1" id="checkbox-1">
      <label for="checkbox-2">3 Star</label>
      <input type="checkbox" name="checkbox-2" id="checkbox-2" checked="checked">
      <label for="checkbox-3">4 Star</label>
      <input type="checkbox" name="checkbox-3" id="checkbox-3">
      <label for="checkbox-4">5 Star</label>
      <input type="checkbox" name="checkbox-4" id="checkbox-4">
    </fieldset>
    <br>
    <button>A Button</button>
  </div>
</div>

CSS

#MainForm {
  display: none;
}

JavaScript

$(function() {
  var DialogContent = $('#dialog').html();
  var originalDialog = $('<div>' + DialogContent + '</div>')[0];
  var cloneDialog = $(originalDialog).clone().attr('id', 'ClonedForm');
  var saveHtmlDialog = $(originalDialog).html();
  //$( "#dialog" ).dialog(); //Use this line to show checkboxes correctly
  //$("input").checkboxradio(); //Use this line to show checkboxes correctly
  $(cloneDialog).dialog(); //Use this line to show checkboxes incorrectly
  $("#ClonedForm input").checkboxradio(); //Use this line to show checkboxes incorrectly
  $("#ClonedForm button").button();
});