Select only 5 dropdown out of 10 and block the remaining one in Javascript JQuery

Question

I am new to javascript and jquery, I am looking to limit the use of dropdown, that is, if I have 10 when selecting the options of 5 the other remaining ones are blocked, this is a small example of what I was doing, it could be limited somehow.

The code is reduced to 3 dropdown but actually I need to do it with 10 thanks to those who can help me

function calcularSuma() {
  leche = $("#leche option:selected").data('precio');
  if (leche == '' || leche == null) {
    leche = 0;
  }

  cacao = $("#cacao option:selected").data('precio');
  if (cacao == '' || cacao == null) {
    cacao = 0;
  }

  fruta = $("#fruta option:selected").data('precio');
  if (fruta == '' || fruta == null) {
    fruta = 0;
  }

  total = leche + cacao + fruta;
  $("#total").val(total);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="row justify-content-center">
    <div class="col col-12 col-sm-3 p-5">
      <span class="textheading2">LECHE</span>
      <select class="browser-default custom-select" name="llet" id="leche" onchange="calcularSuma();">
        <option value="" data-precioselected>Nada</option>
        <option value="4" data-precio="27">14</option>
        <option value="5" data-precio="11">23</option>
        <option value="6" data-precio="19">32</option>
      </select>
    </div>
    <div class="col col-12 col-sm-3 p-5">
      <span class="textheading2">CACAO</span>
      <select class="browser-default custom-select" name="cacaosoluble" id="cacao" onchange="calcularSuma();">
        <option value="" data-precioselected>Nada</option>
        <option value="4" data-precio="28">12</option>
        <option value="5" data-precio="9">23</option>
        <option value="6" data-precio="7">31</option>
      </select>
    </div>
    <div class="col col-12 col-sm-3 p-5">
      <span class="textheading2">FRUTAS</span>
      <select class="browser-default custom-select" name="frutas" id="fruta" onchange="calcularSuma();">
        <option value="" data-precioselected>Nada</option>
        <option value="4" data-precio="27">32</option>
        <option value="5" data-precio="11">12</option>
        <option value="6" data-precio="19">21</option>
      </select>
    </div>
  </div>
  Total: <br>
  <input type="text" name="total" id="total" placeholder="Total">

This may help: https://stackoverflow.com/questions/26039594/how-to-disable-select-option-based-on-another-select-option — JM-AGMS, Nov 18 '20 at 13:32

score 1 · Answer 1 · answered Nov 18 '20 at 13:37

You can do something below.

 function calcularSuma(){
        
        leche = $("#leche option:selected").data('precio');
        cacao = $("#cacao option:selected").data('precio');
        fruta = $("#fruta option:selected").data('precio');
        
        if(leche == '' || leche == null){
            leche = 0;
        } 
          
        
        if(cacao == '' || cacao == null){
            cacao = 0;
        }
    
        
        if(fruta == '' || fruta == null){
            fruta = 0;
        }
        
        if(leche && cacao){
          $("#fruta").prop('disabled', true);
        } else {
          $("#fruta").prop('disabled', false);
        }
        
        if(leche && fruta){
          $("#cacao").prop('disabled', true);
        } else {
          $("#cacao").prop('disabled', false);
        }
        
        if(cacao && fruta){
          $("#leche").prop('disabled', true);
        } else {
          $("#leche").prop('disabled', false);
        }
        
        total = leche + cacao + fruta;
        $("#total").val(total);
      }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<pre>
<body>
    <div class="container">
        <div class="row justify-content-center">
          <div class="col col-12 col-sm-3 p-5">
              <span class="textheading2">LECHE</span>
              <select class="browser-default custom-select" name="llet" id="leche" onchange="calcularSuma();">
                <option value=""  data-precioselected >Nada</option>
                <option value="4" data-precio="27">14</option>
                <option value="5" data-precio="11">23</option>
                <option value="6" data-precio="19">32</option>
              </select>
          </div>
          <div class="col col-12 col-sm-3 p-5">
              <span class="textheading2">CACAO</span>
              <select class="browser-default custom-select" name="cacaosoluble" id="cacao" onchange="calcularSuma();">
                <option value=""  data-precioselected >Nada</option>
                <option value="4" data-precio="28">12</option>
                <option value="5" data-precio="9">23</option>
                <option value="6" data-precio="7">31</option>
              </select>
              </div>
          <div class="col col-12 col-sm-3 p-5">
              <span class="textheading2">FRUTAS</span>
              <select class="browser-default custom-select" name="frutas" id="fruta" onchange="calcularSuma();">
                <option value=""  data-precioselected >Nada</option>
                <option value="4" data-precio="27">32</option>
                <option value="5" data-precio="11">12</option>
                <option value="6" data-precio="19">21</option>
              </select>
        </div>
        </div>
        Total: <br>
        <input type="text" name="total" id="total" placeholder="Total">



   
</body>
</pre>

Hello, thank you very much for answering, is it okay what you propose so I could limit it by quantity, that is, if there were 10 dropdown, only 5 could be selected and the remaining 5 blocked? — danie carvajal, Nov 18 '20 at 13:45

Select only 5 dropdown out of 10 and block the remaining one in Javascript JQuery

1 Answers1