For loop using jquery

Question

What is the correct way to using "for" loop in jquery function? TQ in advance.

<script type="text/javascript">
$(document).ready(function() {
	for(var $i=1; $i<=10; $i++){
     $('#TTID[$i]').change(function() {
         if($(this).val() == "601" || $(this).val() == "9999")
         {
             $('#trainGroup[$i]').prop('disabled', true);
			 $('#trainID[$i]').prop('disabled', true);
         }
         else
         {
             $('#trainGroup[$i]').prop('disabled', false);
			  $('#trainID[$i]').prop('disabled', false);
         }
     }});
	
 });
</script>

This is the HTML code for TTID and trainGroup. When user choose value "601" or "9990", dropdown list for trainGroup will be disable.

<td>Action</td>
		<td><select name = "TTID<?php echo $i; ?>" id="TTID<?php echo $i; ?>" style="width:250px" onchange="otherAction(this.value)">
		<option value="O"></option>
    	<option value="600">Classroom Training</option>
  		<option value="601">Coaches and Mentoring by IM</option>
  		<option value="602">On Job Training</option>
		<option value="9999">Others</option>
		</select></td>
		
	
		<td>Types Training in ILSAS</td>
		<td><select name = "trainGroup<?php echo $i; ?>" id="trainGroup<?php echo $i; ?>" style="width:250px" onchange="otherIlsas(this.value)">
		<option value="O"></option>
    	<option value="700">Power Engineering & Energy Training</option>
  		<option value="701">Management Training</option>
  		<option value="702">IT & Corporate System Training</option>
		<option value="703">Business Operation Tools Certification</option>
		<option value="9999">Others</option>
		</select></td>
		

Below is trainID code. I retrieved the data from the database for this dropdown list.

		<td>List of Training in ILSAS</td>
		<td><?php 
		
		$u="SELECT trainID, trainText FROM tbltraininglist order by traintext asc";
		$q=mysql_query($u);
		
		echo "<select name = 'trainID<?php echo $i; ?>' id='trainID<?php echo $i; ?>' style='width:250px' )'>";
		echo "<option value ='null'></option>";
		while ($m = mysql_fetch_array($q)) {
		
  		
  		?>
			<option value="<?php echo $m['trainID'];  ?>"><?php echo $m['trainText']; ?> </option>
			<?php
  		}	
		
		?>
		</select></td>

Answer 1

Here is your for loop with all the problems fixed

Explanation of your errors follows the code

$(document).ready(function() {
    for (var $i = 1; $i <= 10; $i++) {
        (function(TTID, trainGroup, trainID) {
            $(TTID).change(function() {
                if ($(this).val() == "601" || $(this).val() == "9999") {
                    $(trainGroup).prop('disabled', true);
                    $(trainID).prop('disabled', true);
                } else {
                    $(trainGroup).prop('disabled', false);
                    $(trainID).prop('disabled', false);
                }
            });
        }('#TTID[' + $i + ']', '#trainGroup[' + $i + ']', '#trainID[' + $i + ']'));
    }
});

1) you had things like $('#TTID[$i]') - where $i was the var in the for loop - that wont work in javascript, you would've needed $('#TTID[' + $i + ']') - however,

2) $i would be 11 for every .change function because that's it's value once the loop is done and the .change would only get called after the loop is finished, so, I wrapped the .change stuff in an IIEF, and fixed up the $i issue your code would've had in the one go