?
Solved

How do I loop through dynamic variables with jQuery?

Posted on 2011-03-10
2
Medium Priority
?
312 Views
Last Modified: 2012-05-11
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!
0
Comment
Question by:SiobhanElara
2 Comments
 
LVL 8

Expert Comment

by:McNetic
ID: 35099541
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
 
LVL 39

Accepted Solution

by:
gdemaria earned 2000 total points
ID: 36037958

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

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Hi, Even though I have created this Tutorial on My personal Blog, Some people might not able to find my website, So here i am posting it again Today, from the topic it is very clear that i will be showing you here the very basic usage of how we …
Recently while working on a project I got a very annoying cfdocument has no body error message. I had never seen this error before. So I checked the code. The code was pretty simple; it was Just showing me the cfdocumnt tag and inside that tag a …
Enter Foreign and Special Characters Enter characters you can't find on a keyboard using its ASCII code ... and learn how to make a handy reference for yourself using Excel ~ Use these codes in any Windows application! ... whether it is a Micr…
Hi, this video explains a free download that you can incorporate into your Access databases, or use stand-alone for contact management. Contacts -- Names, Addresses, Phone Numbers, eMail Addresses, Websites, Lists, Projects, Notes, Attachments…

599 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question