JQuery selector in for loop

Question

I have a table with checkboxes and textboxes. The checkboxes are disabled on pageload. Their ids are assigned using a for:each loop in my jsp. I want to enable the checkbox once their textbox on their corresponding row changes value. Here's my code:

for (var i = 0; i < listSize; i++) {
            $("#doctorName" + i).on('change', function(){
                    $("#rowCheck" + i).prop('disabled', false);
            });
        }

If I replace $("#rowCheck" + i) with $("#rowCheck0"), it enables the checkbox. I don't want to hardcode every checkbox id since i render an undetermined number of rows.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures#Creating_closures_in_loops.3A_A_common_mistake — Arun P Johny, Feb 19 '14 at 07:15
http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example — Arun P Johny, Feb 19 '14 at 07:16
http://james.padolsey.com/javascript/closures-in-javascript/ get help from here. — Jai, Feb 19 '14 at 07:23

score 0 · Accepted Answer · answered Feb 19 '14 at 07:16

0

This could be a better approach for your context.

Try,

 $("[id^='doctorName']").on('change', function(){
      var id = this.id;
      $("#rowCheck" + id.charAt(id.length - 1)).prop('disabled', false);
 });

answered Feb 19 '14 at 07:16

Rajaprabhu Aravindasamy

64,912
15
96
124

Wow. I never thought that I'll get an answer this fast! Thank you sir! I just started learning JQuery and JavaScript btw. – dilm Feb 19 '14 at 07:30
@user3326840 Glad to help.! – Rajaprabhu Aravindasamy Feb 19 '14 at 07:32

score 0 · Answer 2 · answered Feb 19 '14 at 07:18

The simplest answer is to enclose the block in another function:

for (var index = 0; index < listSize; index++) {
   (function(i){
            $("#doctorName" + i).on('change', function(){
                    $("#rowCheck" + i).prop('disabled', false);
            });

    }(index)
}

JQuery selector in for loop

2 Answers2