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

Question

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

Answer 1

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

至

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

Answer 2

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.

Answer 3

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