How do I loop through dynamic variables with jQuery?

I have a form where people can sign up for summer camps with optional lunch or after-camp babysitting, but they have to select a camp in order to be able to select the lunch/babysitting that goes with it. The form is generated from a database with the following code (basically):

<cfoutput query="queryThatGotTheInfo">
<input type="checkbox" id="attending#camp_ID#">Camp Name
<input type="checkbox" id="lunch#camp_ID#" />Lunch
<input type="checkbox" id="babysitting#camp_ID#" />Babysitting
</cfoutput>

Open in new window


I figured the best thing to do would be to set both the lunch and babysitting checkboxes to "disabled" to start then, when a Camp Name checkbox was checked, remove the disabled attribute for the corresponding lunch/babysitting boxes with something like this:

function toggleOptions() {
    if ($('#attending#camp_ID#').is(':checked')) {
        $('#lunch#camp_ID#').removeAttr('disabled');
        $('#babysitting#camp_ID#').removeAttr('disabled');
    } else {
        $('#lunch#camp_ID#').attr('disabled', true);
        $('#babysitting#camp_ID#').attr('disabled', true);
    }   
}

Open in new window


But, obviously, that won't work with the CF variables in there. Can you give me a hand? Thanks!
SiobhanElaraAsked:
Who is Participating?
 
gdemariaCommented:

Hey, I have a camp website that does a similar thing!

 Check to choose a week for camp, then check off the days you want lunch...

Here's an idea of how you can do it.   Call the javscript from onCheck and pass the ID of the records to your javascript, then your javascript can take that ID and figure out which check boxes to display or enable...


this is not tested, but the general idea..
<script>
function toggleOptions(ID) {
  var attend = document.getElementById('attending'+ID);
  var lunch = document.getElementById('lunch'+ID);
  var baby = document.getElementById('babysitting'+ID);
  if (attend.checked) {
      lunch.disabled = false;
      baby.disabled = false;
  } else {
      lunch.disabled = true;
      baby.disabled = true;
  }
} 
</script>

<cfoutput query="queryThatGotTheInfo">
<input type="checkbox" id="attending#camp_ID#" onclick="toggleOptions(#camp_id#)">Camp Name
<input type="checkbox" id="lunch#camp_ID#" />Lunch
<input type="checkbox" id="babysitting#camp_ID#" />Babysitting
</cfoutput>

Open in new window

0
 
McNeticCommented:
How about the following  solution: add a classes to your checkboxes and disable the secondary like this:
<cfoutput query="queryThatGotTheInfo">
<input type="checkbox" class="attending" id="attending#camp_ID#">Camp Name
<input type="checkbox" disabled="disabled" id="lunch#camp_ID#" />Lunch
<input type="checkbox" disabled="disabled" id="babysitting#camp_ID#" />Babysitting
</cfoutput>

Open in new window


Then, add the following to your document.ready handler:

$$("input.attending").change(function() {
  $(this).siblings().attr('disabled', !$(this).is(':checked'));
});

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.

Advertise Here