Solved

How do I loop through dynamic variables with jQuery?

Posted on 2011-03-10
2
299 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 500 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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
cfchart issue with html 6 123
Jquery Plugin not working 18 210
segregating a list into two lists 4 71
dynamic form fields and inserting into database 3 44
CFGRID Custom Functionality Series -  Part 1 Hi Guys, I was once asked how it is possible to to add a hyperlink in the cfgrid and open the window to show the data. Now this is quite simple, I have to use the EXT JS library for this and I achiev…
I spent nearly three days trying to figure out how incorporate OAuth in Coldfusion for the Eventful API. Hopefully, this article will allow Coldfusion Programmers to buzz through the API when they need to. Basically, what this script does is authori…
This Micro Tutorial demonstrates using Microsoft Excel pivot tables, how to reverse engineer competitors' marketing strategies through backlinks.
Nobody understands Phishing better than an anti-spam company. That’s why we are providing Phishing Awareness Training to our customers. According to a report by Verizon, only 3% of targeted users report malicious emails to management. With compan…

809 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