Question

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]

Answer 1

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");
  })