Vladimir mans Vladimir mans - 1 month ago 6
jQuery Question

JQuery hide and show based on selection

I did a lot of research before posting it seems that nothing found so far doesn't solve my issue.

I am trying to show/hide option based on selection, so far it is working one way. When Art Print is selected Extra lon option is hidden, but when I select back to Strech print, extra long remains disabled.



jQuery("select#input_5_2").change(function($) {
event.preventDefault();
if ("select#input_5_2 option:selected[value!='Stretched Canvas Print|0']"){
jQuery('select#input_5_3').children('option[value="Extra Long|0"]').prop("disabled", true);
}

});

<select name="input_2" id="input_5_2" onchange="gf_apply_rules(5, [5, 6, 7, 8, 10, 11, 12, 13, 14, 15, 16, 18, 19, 20, 21, 22, 23]);" class="medium gfield_select form-control" tabindex="1" aria-invalid="false">
<option value="Stretched Canvas Print|0" price="">Stretched Canvas Print</option>
<option value="Art Print|0" price="">Art Print</option>
<option value="Framed Print|0" price="">Framed Print</option>
<option value="Rolled Canvas|0" price="">Rolled Canvas</option>
</select>
<select name="input_3" id="input_5_3" onchange="gf_apply_rules(5, [5, 6, 7, 8, 10, 11, 12, 13, 14, 15, 16, 18, 19, 20, 21, 22]);" class="medium gfield_select form-control" tabindex="2" aria-invalid="false">
<option value="Landscape|0" price="">Landscape</option>
<option value="Portrait|0" price="">Portrait</option>
<option value="Square|0" price="">Square</option>
<option value="Extra Long|0" price="" disabled="">Extra Long</option>
</select>




Answer

Try this:

jQuery("#input_5_2").change(function($) {
    if(jQuery(this).val() == "Art Print|0") {
        jQuery("#input_5_3 option:last").prop('disabled', true);
    } else {
        jQuery("#input_5_3 option:last").prop('disabled', false)
    }
});

Assuming the option you want to disable is the last option.