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/

Answer 2

这是另一种方法：

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

}

Answer 3

更好，或者我可以说更快的方法将如下面的代码段。

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

如何根据其他选择选项禁用选择选项

3 个答案: