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

Проблема с этим состоит в том, что он работает только в первый раз, вы выбираете что-то, к сожалению.

EDIT: 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-on-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

Это должно быть очень полезно. –

Но как я могу сделать 4 в динамике gt (4)? –

Объявить переменную 'var index = [рассчитать свой индекс здесь или hardcoded]; $ (" # 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 отключить другие выпадающие значения на основе выбранного значения другого выпадающего списка

ответ

Смежные вопросы