Easy modification to jQuery code to make use of more than one textbox

How to change the following code to make use of all my 4 textboxes with id extra1, extra2,persons and tables?

$(document).ready(function () {
  $('#extra1').blur(function () {
        if ($.trim(this.value) == "") {
          $('#btnUpdate').attr("disabled", true);
        }
      else {
            $('#btnUpdate').removeAttr("disabled")开发者_Go百科;
      }
    });
});

  $('#extra1').blur(function () {

to

  $('#extra1, #extra2, #persons, #tables').blur(function () {

The code modification would be:

$(document).ready(function () {
  $('#extra1, #extra2, #persons, #tables').blur(function () {
        if ($.trim(this.value) == "") {
          $('#btnUpdate').attr("disabled", true);
        }
      else {
            $('#btnUpdate').removeAttr("disabled");
      }
    });
});

But, why not give all of them a class, and use that class as the selector? That way, you can easily add elements later without changing your Javascript.

Use jQuery delegate which will bind only one event handler but will act only on the element which triggers the event. Try this

Wokring demo

$(document).ready(function () {
  $('formSelector').delegate('input[type=text]', 'blur', function () {
      if ($.trim(this.value) == "") {
          $('#btnUpdate').attr("disabled", true);
      }
      else {
            $('#btnUpdate').removeAttr("disabled");
      }
    });
});