如何根据另一选择选项禁用选择选项

-1

场景：我出售粉红色，海军蓝，黑色和大小中小型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/。

来源

2014-09-25 charby

可能重复的[如何禁用基于其他选定选项的选择？]（http://stackoverflow.com/questions/15888444/how-to-disable-select-based-on-other-selected-选项） – melancia 2014-09-25 13:16:36

无论如何只是一个提示。不要为此使用'.attr（）'。改用'.prop（）'。 [.prop（）vs .attr（）]（http://stackoverflow.com/questions/5874652/prop-vs-attr） – melancia 2014-09-25 13:17:38

另一个提示：你实际上并不需要'if ... then ...其他'为此。 '（'＃size option [value ='medium']“）。prop（'disabled'，$（'＃color'）。val（）==”pink“）;' – melancia 2014-09-25 13:18:52

试试这个：

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

使用，而不是 'ATTR' 道具'。

演示：

http://jsfiddle.net/59knw46r/

来源

2014-09-25 13:19:58 RGS

太棒了，谢谢。如果我想禁用多种选项，即粉红色大小中等和黑色大小 - 我该如何去做？ – charby 2014-09-26 11:35:35

下面是一个可供选择的方法：

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

}

来源

2014-09-25 13:21:00

您可以使用三分之一的行编写相同的代码。 – melancia 2014-09-25 13:46:36

是的，很清楚。只是试图为他拼出来，所以他有更多的选择。 – 2014-09-25 13:49:47

更好，或我可以说更快的方法将是如下片段。

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

来源

2014-09-25 13:21:19 Mayank

如何根据另一选择选项禁用选择选项

回答

相关问题