Q: 3 dropdowns limit total to 8 via jQuery I have 3 dropdowns every dropdown has 8 options. Now my goal is to limit the combined value of these 3 dropdowns to 8. So for example if you pick 7 in the first you can only select 1 in the next two if you select 1 in the second you can't select anything in the third.
I am trying to achieve my goal by disabling certain options, but there is a flaw in my logic. I can't change my selected option once I've selected one because I've disabled the options. Anyone knows how I can fix this problem?
Thanks in advance.
Here is a jsfiddle as example of my code:
https://jsfiddle.net/k7krx87L/4/
My jQuery code:
$(".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);
    });
});


A: You need to have a variable check to see which items to be enabled like


var $selects = $(".options select").change(function() {
  var sum = 0;
  $selects.each(function() {
    sum += +this.value;
  });
  var rem = 9 - sum;

  $selects.each(function() {
    var max = +this.value + rem;
    $(this).find('option').prop('disabled', function() {
      return +this.value > max;
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="options">
  <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>
</div>



A: In your code you have to take ele from loop and it will work
$(".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(index, ele) {
      $(ele).attr("disabled", true);
   });

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

