jQuery禁用基於其他下拉列表的選定值的其他下拉值

我在我的網站上有3個下拉列表，每個下拉列表有8個選項（1到8）。我的目標是根據您在其他下拉列表中選擇的內容禁用下拉選項，總和最大爲8.因此，例如，如果您在第一個下拉列表中選擇4，則只能在其他下拉列表中選擇1至4 2個下拉菜單。jQuery禁用基於其他下拉列表的選定值的其他下拉值

如果您在第一個選項中選擇8，則不能從其他選項中選擇其他選項。

這是我已經試過：

$(".options select").change(function() { 
    var value1 = $("#input_1_5").val(); 
    var value2 = $("#input_1_6").val(); 
    var value3 = $("#input_1_7").val(); 
    var sum = parseInt(value1) + parseInt(value2) + parseInt(value3); 
    var rest = 9-sum; 

    $("#input_1_6 > option").slice(rest,9).each(function() { 
    $(this).attr("disabled", true); 
    }); 

    var rest2 = rest - 9 
    $("#input_1_7 > option").slice(rest2,9).each(function() { 
    $(this).attr("disabled", true); 
    }); 
});

這樣做的問題是，它只能工作在第一時間選擇的東西，很遺憾。

編輯：更新的jsfiddle提前https://jsfiddle.net/k7krx87L/4/

謝謝！

來源

2016-03-18 Frank Lucas

請提供迄今爲止所做的工作的PLUNKR。 –

@SatejS這裏是一個jsfiddle https://jsfiddle.net/k7krx87L/1/ –

這應該有助於http://stackoverflow.com/questions/2155909/how-can-i-disable-an-option-in-a- select-based-its-value-in-javascript –

你會使用以下的選擇：

$("#input_1_6 option:gt(4)").prop("disabled", true);

這意味着禁用元素與編號的所有選項input_1_6從5日開始，選擇gt(4)指從指數4個元素，索引從0開始DOM。

來源

2016-03-18 11:30:12

這應該是非常有幫助的。 –

但是我怎樣才能使GT（4）動態的4？ –

聲明一個變量var index = [在這裏計算你的索引，或硬編碼]; $（「＃input_1_6 option：gt（」+ index +「）」）。prop（「disabled」，true）;' –

<!DOCTYPE html> 
<html> 
<body> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script> 
<script> 
$(function() { 


    $('#input_1_5').on('change', function(){ 
     var input_1_5 = $(this).val(); 
     var input_1_6 = $('#input_1_6').val(); 
     var input_1_7 = $('#input_1_7').val(); 
     var cur_val; 
     cur_val=parseInt(input_1_5)+parseInt(input_1_6)+parseInt(input_1_7); 
     for(i=1;i<=8;i++) 
     { 
      if((i+parseInt(cur_val))<=8) 
      { 
       $('#input_1_6').children('option[value="' + i + '"]').attr('disabled', false); 
       $('#input_1_7').children('option[value="' + i + '"]').attr('disabled', false); 
      } 
      else 
      { 
       $('#input_1_6').children('option[value="' + i + '"]').attr('disabled', true); 
       $('#input_1_7').children('option[value="' + i + '"]').attr('disabled', true); 
      } 
     } 
    }); 
    $('#input_1_6').on('change', function(){ 
     var input_1_5 = $('#input_1_5').val(); 
     var input_1_6 = $(this).val(); 
     var input_1_7 = $('#input_1_7').val(); 
     var cur_val; 
     cur_val=parseInt(input_1_5)+parseInt(input_1_6)+parseInt(input_1_7); 
     for(i=1;i<=8;i++) 
     { 
      if((i+parseInt(cur_val))<=8) 
      { 
       $('#input_1_5').children('option[value="' + i + '"]').attr('disabled', false); 
       $('#input_1_7').children('option[value="' + i + '"]').attr('disabled', false); 
      } 
      else 
      { 
       $('#input_1_5').children('option[value="' + i + '"]').attr('disabled', true); 
       $('#input_1_7').children('option[value="' + i + '"]').attr('disabled', true); 
      } 
     } 
    }); 
    $('#input_1_7').on('change', function(){ 
     var input_1_5 = $('#input_1_5').val(); 
     var input_1_6 = $('#input_1_6').val(); 
     var input_1_7 = $(this).val(); 
     var cur_val; 
     cur_val=parseInt(input_1_5)+parseInt(input_1_6)+parseInt(input_1_7); 
     for(i=1;i<=8;i++) 
     { 
      if((i+parseInt(cur_val))<=8) 
      { 
       $('#input_1_5').children('option[value="' + i + '"]').attr('disabled', false); 
       $('#input_1_6').children('option[value="' + i + '"]').attr('disabled', false); 
      } 
      else 
      { 
       $('#input_1_5').children('option[value="' + i + '"]').attr('disabled', true); 
       $('#input_1_6').children('option[value="' + i + '"]').attr('disabled', true); 
      } 
     } 
    }); 

}); 
</script> 

<select name="" id="input_1_5"> 
    <option value="0">0</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
    <option value="6">6</option> 
    <option value="7">7</option> 
    <option value="8">8</option> 
</select> 
<select name="" id="input_1_6"> 
    <option value="0">0</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
    <option value="6">6</option> 
    <option value="7">7</option> 
    <option value="8">8</option> 
</select> 
<select name="" id="input_1_7"> 
    <option value="0">0</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
    <option value="5">5</option> 
    <option value="6">6</option> 
    <option value="7">7</option> 
    <option value="8">8</option> 
</select> 

</body> 
</html>

希望這會幫助你。

來源

2016-03-18 11:33:16 Arokiyanathan

哇，這看起來像很多代碼相對簡單的東西，我會試試看，並試圖理解:) –

jQuery禁用基於其他下拉列表的選定值的其他下拉值

回答

相關問題