How to Enable or Disable HTML Form Elements Using jQuery

From jQuery 1.7, you could use the prop() method. Before 1.7, you have the option of using the attr() method. Both of these methods can be used in the same way for this purpose.

jQuery 1.7+

$(document).ready(function(){
// disable input
  $("button").click(function(){
      $('input[type="text"]').prop("disabled", true);
  });

//enable input
$("button").click(function(){
      $('input[type="text"]').prop("disabled", false);
  });
});

Prior to jQuery 1.7

$(document).ready(function(){
//disable input
  $("button").click(function(){
      $('input[type="text"]').attr("disabled", true);
  });

//enable input
$("button").click(function(){
      $('input[type="text"]').attr("disabled", false);
  });
});

You may also use $(“:text”) or $(‘input[type=”text”]’) to select all elements of type text. You can also use $(“#inputid”) to select a particular element by id.

Because :text is a jQuery extension and not part of the CSS specification, queries using :text cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. For better performance in modern browsers, use [type=”text”] instead.

Found this article interesting? Follow Brightwhiz on Facebook, Twitter, and YouTube to read and watch more content we post.