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".

Balachandran · Accepted Answer · 2014-07-17 04:54:35Z

2

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

edited Jul 17, 2014 at 4:54

answered Jul 17, 2014 at 4:36

Balachandran

9,6271 gold badge19 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user3790186 Over a year ago

..Thank you very much...It is working as required....On load how can i disable the "shipping options" files and enable it only if i select a country

Balachandran Over a year ago

@user3790186 sorry i wrongly understand wait for 2 min

user3790186 Over a year ago

@Rajaprabhu Aravindasamy ..Thank You very much.. Exactly what i required..Thanks to both Bala and Rajaprabhu Aravindasamy

Balachandran Over a year ago

@user3790186 which jquery version you are using ?

user3790186 Over a year ago

@ Bala Now i am using jquery-1.11.1.min.js..the error is gone..but The Free shipping can be selected for all countries ???

|

Arun P Johny · Accepted Answer · 2014-07-17 04:37:40Z

1

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

});

edited Jul 17, 2014 at 4:37

answered Jul 17, 2014 at 4:28

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

1 Comment

Rajaprabhu Aravindasamy Over a year ago

$(this).val() without value attribute wont work in older browsers.

Bhojendra Rauniyar · Accepted Answer · 2014-07-17 04:31:36Z

0

Use the following before the change function:

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

fiddle

answered Jul 17, 2014 at 4:31

Bhojendra Rauniyar

86.1k36 gold badges179 silver badges241 bronze badges

Comments

Sridhar R · Accepted Answer · 2014-07-17 04:39:14Z

0

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

edited Jul 17, 2014 at 4:39

answered Jul 17, 2014 at 4:30

Sridhar R

20.4k7 gold badges41 silver badges35 bronze badges

1 Comment

user3790186 Over a year ago

Sorry, it is not working..Free shipping is disabled for all options

Collectives™ on Stack Overflow

Disabling some options in select using jQuery

4 Answers 4

DEMO

NEW UPDATED DEMO

6 Comments

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related