How to make a dropdownlist disabled on change event using JQUERY?

Question

$(document).ready(function() {
      $('#<%=ddlContinents.ClientID %>').change(function() { 
      var element = $(this);
      var totalLength = element.children().length; 
      if ($(this).disabled == false) { $(this).disabled = true; }
      });
});

What I am trying to do is fire off the change event of the dropdownlist and on change making this dropdownlist disabled. The code is firing and everything, but it does not disable the dropdownlist.

This portion of the code is not working:

if ($(this).disabled == false) { $(this).disabled = true; } });

Solution 1

You should use .prop() for jQuery 1.6+ or .attr() for earlier versions of jQuery:

> jQuery 1.6:

$(document).ready(function() {
  $('#<%=ddlContinents.ClientID %>').change(function() { 
    var element = $(this);
    var totalLength = element.children().length;

    if (!$(this).prop("disabled")) { 
      $(this).prop("disabled", true); 
    } 
  });
});

< jQuery 1.6:

$(document).ready(function() {
  $('#<%=ddlContinents.ClientID %>').change(function() { 
    var element = $(this);
    var totalLength = element.children().length;

    if (!$(this).attr("disabled")) { 
      $(this).attr("disabled", "disabled"); 
    } 
  });
});

Solution 2

if (!$(this).attr("disabled")) { $(this).attr("disabled","disabled"); }

If you want to enable it later on, you gotta do:

$(this).removeAttr("disabled");

Solution 3

I know this post is old..This might help if anyone stuck with disabling dropdown on dropdown chnage function

  if ($(this).attr('disabled', false)) 
         { $(this).attr('disabled', true);
    }  

Comments

[Erik L]

oops, try $(this).attr("disabled") == false