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?](http://stackoverflow.com/questions/15888444/how-to-disable-select-based-on-other-selected-option) — emerson.marini, Sep 25 '14 at 13:16
Just a tip anyway. Don't use `.attr()` for this. Use `.prop()` instead. [.prop() vs .attr()](http://stackoverflow.com/questions/5874652/prop-vs-attr) — emerson.marini, Sep 25 '14 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, Sep 25 '14 at 13:18

score 2 · Accepted Answer · answered Sep 25 '14 at 13:19

2

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/

answered Sep 25 '14 at 13:19

RGS

5,131
6
37
65

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? – charby Sep 26 '14 at 11:35

score 0 · Answer 2 · answered Sep 25 '14 at 13:21

0

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

}

answered Sep 25 '14 at 13:21

David Lounsbrough

389
1
8

You could write this same code using a third of the lines. – emerson.marini Sep 25 '14 at 13:46
Yes, well aware. Just trying to spell it out for him so he has more options. – David Lounsbrough Sep 25 '14 at 13:49

score 0 · Answer 3 · answered Sep 25 '14 at 13:21

0

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

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

answered Sep 25 '14 at 13:21

Mayank

1,351
5
23
42

How to disable select option based on another select option

3 Answers3

Linked