Disabling some options in select using jQuery

Question

I have the following html code:

<select class="pointSelect" id="mySelect" tabindex="2" name="mySelect">
  <option value="01" selected="selected">Choose Country</option>
  <option>United States</option>
  <option>Canada</option>
  <option>United Kingdom</option>
  <option>Czech Republic</option>
  <option>Any other Country</option>
</select>

<select class="pointSelect" id="mySelect1" tabindex="3" name="mySelect1">
  <option value="nothing" selected="selected">Choose Shipping Options</option>
  <option>Free Shipping</option>
  <option>Registered Airmail</option>
  <option>Express Shipping</option>
</select>

and the following jQuery code:

$("#mySelect").change(function() {
  debugger;
  var index = $(this).find("option:selected").index();
  $("#mySelect1").find("option:lt("+index+")").attr("disabled","disabled");
  $("#mySelect1").find("option:gt("+index+")").removeAttr("disabled");
});

Demo jsFiddle

How can i disable Free Shipping only for "Any other country".

Answer 1

Use Prop in Jquery to disable the option.If you use attr You cant enable and disable option one more time

   $("#mySelect1").prop("disabled", true);
   $("#mySelect").change(function () {
         $("#mySelect1").prop("disabled", (this.value == '01'));
         $("#mySelect1").find("option:eq(1)").prop("disabled", (this.value == 'Any other Country'));
     });

DEMO

NEW UPDATED DEMO

Answer 2

You can use .prop() as shown below(I doubt it will work in IE)

$("#mySelect").change(function () {
    var disable = $(this).val() == 'Any other Country';
    $("#mySelect1").find("option:contains(Free Shipping)").prop("disabled", disable);
});

Demo: Fiddle .

Another method is to remove the option instead of disabling it like here

$("#mySelect").change(function () {
    var freeShipping = $(this).val() != 'Any other Country';
    if (freeShipping) {
        if (!$("#mySelect1").find("option:contains(Free Shipping)").length) {
            $("#mySelect1 option:first-child").after("<option>Free Shipping</option>");
        }
    } else {
        $("#mySelect1").find("option:contains(Free Shipping)").remove();
    }

});

Answer 3

Try this

For disabling shipping HTML

<select disabled="disabled" class="pointSelect" id="mySelect1" tabindex="3" name="mySelect1">

Script

 $("#mySelect").change(function () {
    $("#mySelect1").removeAttr("disabled")
    var text = $(this).find("option:selected").text();
    if (text == 'Any other Country') {
        $("#mySelect1").find("option:eq(1)").attr("disabled", "disabled");
    } else {
        $("#mySelect1").find("option").removeAttr("disabled")
    }
    });

DEMO

Answer 4

Use the following before the change function:

$("#mySelect option:last").prop('disabled','disabled');

fiddle