How to enable form inputs in a hidden div lightbox?

Question

Using jQuery 1.8 and the prettyPhoto plugin, inline content for lightbox so it's a hidden div that loads when the designated link is clicked:

<a href="#private" rel="prettyPhoto[inline]">Select Groups</a>

    <div id="private" style="display:none;">
            <?php
            $db = JFactory::getDbo();
            $query = $db->getQuery(true);
            $db->setQuery("SELECT * FROM #__community_groups_members AS a
      INNER Join #__community_groups AS b
      ON b.id = a.groupid
      WHERE a.memberid = $user_id
      AND a.approved = 1");
            $groups = $db->loadObjectList();
            foreach($groups as $groupData){
                echo "<input type=\"checkbox\" id=\"chk\" name=\"groups[]\" value=\"".$groupData->id."\" />".$groupData->name."<br />";
            }
            ?>
        </p>
    </div>

When this lightbox is closed, the checked boxes are cleared so the input isn't passed back through the main page/form. I tried using jQuery to enable the inputs, thinking that might help but still the values don't pass to the post array. Here's the function that I thought would remedy but hasn't shown any effect:

<script type="text/javascript" charset="utf-8">
jQuery(document).ready(function(){
    jQuery("#chk").prop("disabled", false);
});
</script>

Note- this function is placed at the bottom of the page.

How do I use those inputs that are in the hidden div lightbox?

Answer 1

Add additional javascript to handle user events when the lightbox-based inputs are visible.

For example, add a hidden field in the form that will be submitted. When the lightbox is open, capture the user actions to update the value(s) of the hidden field. Then when the form is submitted, it will submit the data from the field.