Как отключить поля опций выбора при выборе предыдущей опции?

Question

У меня есть два блока выбора, один выбирает усилитель, а второй выбирает шкаф, соответствующий ему.

Моя проблема заключается в том, что мне нужно добавить значение disabled = "disabled" в опции Cabinet, если выбрано «Amplifier 2».

Я попробовал несколько вариантов, таких как:

$("#amp option.grey-out option:selected").change() { 
    $("option.disable").attr("select[disabled='disabled']"); 
}); 

Вот мой HTML:

<select required="" autofocus="" id="amp" name="options" class="select-model"> 
    <option data-value="500">Amplifier 1</option> 
    <option data-value="1000" class="grey-out">Amplifier 2</option> 
</select> 

<select required="" autofocus="" id="cab" name="options" class="select-model"> 
    <option data-value="100" class="disable">Cabinet 1</option> 
    <option data-value="200" class="disable">Cabinet 2</option> 
</select> 

Я начал jsFiddle here

Answer 1

Похоже, вам нужно что-то вроде этого:

$("#amp").on('change', function() { 
    $("#cab").prop('disabled', $(this).val() == "Amplifier 2") 
}); 

http://jsfiddle.net/gvalmon/shgfk/

Более подробная информация может помочь найти лучшее решение.

Answer 2

Нравится это ...?

$(document).ready(function() { 
$('#amp').change(function() { 
    var ampVal = $('#amp').val(); 
    if (ampVal == 'Amplifier 2') { 
     $('#cab').attr('disabled', 'true'); 
    } else { 
     $('#cab').removeAttr('disabled'); 
    } 
}); 
}); 

jsfiddle