How to disable a dropdown based on a previous dropdown?

Question

Here is my current javascript:

$('#blend1').change(function(e){
if($(this).val() == "5") || if($(this).val() == "6") || if($(this).val() == "7") || if($(this).val() == "8"){
 $("#gtype1 option[value='1']").prop('disabled',true);
 $("#gtype1 option[value='3']").prop('disabled',true);
}
else {
$("#gtype1 option[value='1']").prop('disabled',false);
$("#gtype1 option[value='3']").prop('disabled',false);
}
});

Can anyone tell me why this doesn't work? I'm trying to disable the values 1 and 3 in the second dropdown if options 5,6,7 or 8 are selected in the first dropdown.

Try using .attr('disabled','disabled') instead of .prop('disabled',false) To re-eanble use .removeAttr('disabled') http://stackoverflow.com/a/2867432/5257157 — Tonny, Apr 05 '16 at 14:31

score 2 · Accepted Answer · edited Apr 05 '16 at 15:12

2

Your syntax :

if($(this).val() == "5") || if($(this).val() == "6") || if($(this).val() == "7") || if($(this).val() == "8")

Correction :

if($(this).val() == "5" || $(this).val() == "6" || $(this).val() == "7" ||$(this).val() == "8"){
    //do stuff
}

edited Apr 05 '16 at 15:12

cbr

12,563
3
38
63

answered Apr 05 '16 at 14:31

Velimir Tchatchevsky

2,812
1
16
21

Awesome, that works. Can I ask you one more thing? If I am doing this in a modal window, when it first pops up I can select an illegal option. How do I make it impossible to select an illegal option even before a selection is made? PS this is because I am carrying the values from these select menus to the modal window select. – dzags Apr 05 '16 at 14:37
so what stops you from disabling the options in the modal onLoad? If I understand you correctly you have a select with some option, choosing which should open a pop-window with another select in it? – Velimir Tchatchevsky Apr 05 '16 at 14:53
Sort of, I figured it out though. It's a cart page with options on the main page and then an upsell page that pulls the same dropdown with the same options checked at first, but able to change it for the upsell. I ended up just using the same code 3 times, for the main page, then for the upsell and then for the if then for the upsell referencing the main. – dzags Apr 05 '16 at 17:19

score 0 · Answer 2 · answered Apr 05 '16 at 14:41

Your if / else statement is wrong.

It should be:

$('#blend1').on('change', function(e) {
    if ($(this).val() === '5' || $(this).val() === '6' || $(this).val() === '7' || $(this).val() === '8') {
        $("#gtype1 option[value='1']").attr('disabled',true);
        $("#gtype1 option[value='3']").attr('disabled',true);
    } else {
        $("#gtype1 option[value='1']").attr('disabled',false);
        $("#gtype1 option[value='3']").attr('disabled',false);
    }
});

Demo: https://jsfiddle.net/8n8ofrjo/1/

Edit Or: https://jsfiddle.net/8n8ofrjo/2/

How to disable a dropdown based on a previous dropdown?

2 Answers2