如何根據另一選擇選項禁用選擇選項

-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

如何根據另一選擇選項禁用選擇選項

回答

相關問題