CODEWITHSUNDEEP
javascriptjquery
Omnipresent
Omnipresent

Reputation: 30424

looping through elements in jquery

I've got a page with bunch of drop downs and each drop down has a button next to it. When the page initially loads I want all the buttons to be disabled and if there is a change to a specific drop down then its corresponding button shall be enabled.

I've got the following code down for this but I need to know how to loop through all the drop downs and buttons so I can generalize it. 

$(document).ready(function () {
  //disable all buttons
  function disableAllButtons () {
      $(':input[type=button]').attr("disabled", "true");
  }
  disableAllButtons();
  //enable button when drop down changes
  $(':input[name=sNewPKvalue1]').focus(function() {
      disableAllButtons();
      $(':input[name=Update0]').removeAttr("disabled");
  })
  //enable button when drop down changes
  $(':input[name=sNewPKvalue2]').focus(function() {
      disableAllButtons();
      $(':input[name=Update1]').removeAttr("disabled");
  })
  ////.....question?
});

Question

If I have 12 dropdowns and 12 buttons

How do I loop through all the drop downs with name sNewPKvalue[1-12] and all the buttons with name Update[0-11]

Upvotes: 2

Views: 434

Answers (4)

Abe Miessler
Abe Miessler

Reputation: 85126

I would not recommend a loop. Just use a selector that selects the elements you want and perform the appropriate action. My first thought is to assign a CSS class to the buttons and drop down lists you are talking about. Then you can simply do something like this:

$('.dropDown').focus(function(){
   $(".ddlButton").attr("disabled", "true");
   $(this).closest('.ddlButton').removeAttr("disabled");
});

Upvotes: 2

user1027444
user1027444

Reputation:

What you could do is to make a for loop.

for(var i = 1; i <= 12; i++) {
    $("select[name='sNewPKvalue"+i+"']").doSomething();
}

for(var i = 1; i <= 11; i++) {
    $(":button[name='Update"+i+"']").doSomething();
}

Upvotes: 0

Michal B.
Michal B.

Reputation: 5719

I would do something like:

$.each([1, 12], function(index, value) {
    var valmin = val - 1;
    $(':input[name=sNewPKvalue'+value+']').focus(function() {
        disableAllButtons();
        $(':input[name=Update'+valmin+']').removeAttr("disabled");
    })
});

I didn't test this one, but you should get the idea ;)

Upvotes: 1

Joseph Marikle
Joseph Marikle

Reputation: 78590

You can do it that way.

for (var i = 0; i < 12; i++)
{
  $(':input[name=sNewPKvalue'+(i+1)+']').focus(function() {
      disableAllButtons();
      $(':input[name=Update'+i+']').removeAttr("disabled");
  })
}

Or

  $(':input[name^=sNewPKvalue]').focus(function() {
      disableAllButtons();
      $(':input[name=Update'+(Number(this.name.match(/[0-9]+/))-1)+']').removeAttr("disabled");
  })

Upvotes: 0

Related Questions