javascript - 如何禁用基于另一个选择选项的选择选项

Question

场景:我正在销售一件粉色、海军蓝、黑色以及小号、中号和大号的 T 恤。我有两个选择框，一个用于颜色，另一个用于尺寸。我的中号粉色 T 恤已经卖完了，因此需要禁用此选项。当选择“粉色”时，如何禁用“中”选项，但确保它对于其他颜色选项处于事件状态？

<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>

我自己尝试过解决这个问题，但似乎无法让它发挥作用。我需要一个适用于带有字母和空格的选项值的解决方案，即“深粉色”或“超大”，因为选项值将被传递到结账处。这是我得到的最接近的解决方案:

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

^ 这是基于此处找到的文章:http://www.codeoncall.com/disable-drop-down-list-items-based-on-another-drop-down-selection/ .

Answer 1

试试这个:

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

使用“prop”而不是“attr”。

演示:

http://jsfiddle.net/59knw46r/