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

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

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

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

Use the following before the change function:

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

fiddle

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

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

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

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

1 Comment

Comments

1 Comment

Related