Jquery: How can disabled/enabled option dynamically

Question

Can someone help me with the code that I need to activate / deactivate some option? I have 4 different selects. First of all I need that jquery check that there are no values ​​greater than the variable stock (I think this is done). After this I need that when one select changes, check the value of the other selects options and deactivate them if the value is greater than the available stock. I need to dynamically handle the content of the selects and they are activated / deactivated according to the stock.

I have this code, It works "well" with the first select, but when I change the second select it affects the first one. I don't know if I explained correctly, but in the jsfiddle/Code I think the idea is better explained https://jsfiddle.net/apejqfsg/17/

HTML

<select id="select1" class="stock">
  <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>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<select id="select2" class="stock">
  <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>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<select id="select3" class="stock">
  <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>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<select id="select4" class="stock">
  <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>
  <option value="9">9</option>
  <option value="10">10</option>
</select>
<p>Max Stock: <span id="disponibles">8</span></p>

JQUERY

$(document).ready(function () {
  var previous;
  var maxStock = 8;
  $(".stock option")
    .filter(function () {
      return $(this).val() > maxStock;
    })
    .prop("disabled", true);

  $(".stock")
    .focus(function () {
      previous = this.value;
      $(".stock option").each(function () {});
    })
    .change(function () {
      maxStock = maxStock + (previous - this.value);
      var value = this.value;
      var id = $(this).attr("id");
      $(".stock option").each(function () {
        var idParent = $(this).parent().attr("id");
        if (id != idParent) {
          if (this.value > maxStock) {
            this.disabled = true;
          }
        }
      });
      previous = this.value;
      $("#disponibles").html(maxStock);
    });
});

Answer 1

Implementation using on change.

$(document).ready(function() {
  var maxStock = 8;
  var selectedValue;
  var $currentSelect;
  var optionValue;
  var $selectBox;

    // Disable All Options having value > maxStock
  $('.stock option').filter(function() {
    return $(this).val() > maxStock;
  }).prop('disabled', true);


  $('.stock').change(function() {
    $currentSelect = $(this);
    selectedValue = $currentSelect.data('selected-value');
    if (selectedValue) {
      maxStock = maxStock + parseInt(selectedValue);
    }
    selectedValue = parseInt($currentSelect.val());
    maxStock = maxStock - selectedValue;
    $currentSelect.data('selected-value', $currentSelect.val());
    $('#disponibles').text(maxStock);

    // Update options after selection
    $(".stock").each(function() {

      $selectBox = $(this);
      if (!$selectBox.is($currentSelect)) {
         selectedValue = parseInt($selectBox.val());
        if (!selectedValue) {
          selectedValue = 0;
        }
        $selectBox.find('option').each(function() {
          optionValue = $(this).val();
          if (optionValue > maxStock && optionValue > selectedValue) {
            $(this).prop('disabled', true);
          } else {
            $(this).prop('disabled', false);
          }
        });
      }
    });

  });
});

You can test using fiddle link

Answer 2

probably best to perform disabling of options during focus rather than on change.

try this:

$(document).ready(function(){
    ...
    $(".stock").focus(function () {
        var otherMaxStock=maxStock;
        var currId=$(this).attr('id');
        $( ".stock" ).each(function( index ) {
            if (currId!=$(this).attr('id'))
                otherMaxStock-=$(this).val();
        });
        $(this).find("option:gt("+otherMaxStock+")").prop( "disabled", true );
    }).change(function() {
        /*
        maxStock=maxStock+(previous-this.value);
        ...
        $("#disponibles").html(maxStock); */