Experts Exchange connects you with the people and services you need so you can get back to work.

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!

SiobhanElara

Asked: 2011-03-10

Advertise Here

1 Solution

LVL 8

McNeticCommented: 2011-03-10

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

LVL 39

gdemariaCommented: 2011-06-24

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

Question has a verified solution.

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

How do I loop through dynamic variables with jQuery?

Join & Write a Comment Already a member? Login.

Featured Post