Solved

How do I loop through dynamic variables with jQuery?

Posted on 2011-03-10

1 solution

307 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!

Comment

Question by:SiobhanElara

[X]

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

Help others & share knowledge
Earn cash & points
Learn & ask questions

Join The Community

2 Comments

LVL 8

Expert Comment

by:McNetic

ID: 350995412011-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

Accepted Solution

by:gdemaria

gdemaria earned 500 total points

ID: 360379582011-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

Featured Post

Question has a verified solution.

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

Creating Your Own Function for Sending Email

Article by: Gurpreet Singh

Hi, I will be creating today a basic tutorial on how we can create a Mail Custom Function and use it where ever we want. The main advantage about creating a custom function is that we can accommodate a range of arguments to pass to the Function and …

ColdFusion Language

CFGRID: How to open a cfwindow on double click of a cfgrid row

Article by: stu215

PROBLEM: How to open a cfwindow or run a function on double click of a cfgrid row. One of my clients wanted to be able to double click on a row item to get more detailed information about a transaction and to be able to modify the line items i…

ColdFusion Language

How to access multiple mailboxes from one account in MS Exchange Server 2010 - video tutorial

Video by: Adam

There are cases when e.g. an IT administrator wants to have full access and view into selected mailboxes on Exchange server, directly from his own email account in Outlook or Outlook Web Access. This proves useful when for example administrator want…

Network monitoring: why having a policy is the best policy?

Video by: AdRem

Monitoring a network: why having a policy is the best policy? Michael Kulchisky, MCSE, MCSA, MCP, VTSP, VSP, CCSP outlines the enormous benefits of having a policy-based approach when monitoring medium and large networks. Software utilized in this v…