How to disable select option based on another select option

Question

Scenario: I am selling a T-shirt in pink, navy, black and size small, medium and large. I've got two selection boxes, one for color and the other for size. I'm sold out of medium pink T-shirts, so need to disable this option. How can I disable the 'Medium' option when 'Pink' is selected, but ensure that it's active for the other color options?

<select name="product[]" id="color"> <option value="Pink">Pink</option> <option value="Navy">Navy</option> <option value="Black">Black</option> </select> <select name="product[]" id="size"> <option value="Small">Small</option> <option value="Medium">Medium</option> <option value="Large">Large</option> </select>

I've had a punch at solving this issue myself but can't seem to get it to work. I need a solution which works with option values with letters and spaces i.e. 'Dark Pink' or 'Extra Large', as the option values are passed forward to the checkout. This is the closest I've gotten to a solution:

function enableElements() { if($('#color').val() == "pink"){ $("#size option[value='medium']").attr('disabled',true); } else $("#size option[value='medium']").attr('disabled',false); }

^ This is based upon the article found here: http://www.codeoncall.com/disable-drop-down-list-items-based-on-another-drop-down-selection/.

possible duplicate of How to disable select based on other selected option? — emerson.marini
– emerson.marini, Commented Sep 25, 2014 at 13:16
Just a tip anyway. Don't use .attr() for this. Use .prop() instead. .prop() vs .attr() — emerson.marini
– emerson.marini, Commented Sep 25, 2014 at 13:17
Another tip: You don't actually need an if...then...else for this. $("#size option[value='medium']").prop('disabled', $('#color').val() == "pink"); — emerson.marini
– emerson.marini, Commented Sep 25, 2014 at 13:18

RGS · Accepted Answer · 2014-09-25 13:19:58Z

Try this:

$('#color').change(function(e){ if($(this).val() == "Pink"){ $("#size option[value='Medium']").prop('disabled',true); } else { $("#size option[value='Medium']").prop('disabled',false); } });

Use 'prop' instead of 'attr'.

Demo:

http://jsfiddle.net/59knw46r/

Awesome, thank you. If I wanted to disable multiple options i.e. pink size medium and black size small and large - how would I go about doing that?

David Lounsbrough · Accepted Answer · 2014-09-25 13:21:00Z

Here is an alternative method:

function enableElements() { if ($('#color').val() == "pink") { $("#size").children().each(function() { if ($(this).val() == 'medium') { $(this).prop('disabled',true); } }); } else { $("#size").children().each(function() { if ($(this).val() == 'medium') { $(this).prop('disabled',false); } }); } }

Yes, well aware. Just trying to spell it out for him so he has more options.

Mayank · Accepted Answer · 2014-09-25 13:21:19Z

a better , or i can say a faster approach would be as following snippet.

$("#size").find("option[value='Medium']").prop('disabled',true)

Collectives™ on Stack Overflow

How to disable select option based on another select option

3 Answers 3

1 Comment

2 Comments

Comments

Linked

Hot Network Questions