Red item on screen prevent Submit - Javascript/Jquery

Question

I have a view with 3 divs and 20 input number in every row of my div and a input submit. Every line comes from my bank.

(For this example I will use only 3 inputs number).

Those of mine divs are like 3 categories of anything, I mean, I will exemplify here in SCHOOL GRADES and CATEGORIES will be STUDENTS.

How I use ASP . NET MVC to make the VIEW so I do not use <input>, but yes @Html.TextBox.. As it makes no difference to me that I write with @Html, because doubt does not refer to that, so I wrote with <input> to facilitate.

function validacao(contagem){
  var botao = false;
  var cor = "black;"
  var total = 0;
  
  /*
  Alem da contagem, eu passo outros parametros, para que eu consiga realizar a
  minha soma, então as removi, pois nao acho necessario para minha duvida.
  */
  
  
  if (total < 9) {
    botao = false;
    cor = "black";
  } else {
    botao = true;
    cor = "red"
  }
    
  for (var i = 0; i <= contagem; i++) {
    $("#meusInputs"+i).css('color', cor);
    $("#btn-salvar").prop('disabled', botao);
  }
  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Media de Notas</h3>
<div class="form-inline">
<div class="form-inline">
<p> Maria </p>
<input type="number" class = "form-control" id="meusInputs"+contagem onblur="validacao("+@contagem+")">
<input type="number" class = "form-control" id="meusInputs"+contagem onblur="validacao("+@contagem+")">
<input type="number" class = "form-control" id="meusInputs"+contagem onblur="validacao("+@contagem+")">
</div>
<div class="form-inline">
<p> Joao </p>
<input type="number" class = "form-control" id="meusInputs"+contagem onblur="validacao("+@contagem+")">
<input type="number" class = "form-control" id="meusInputs"+contagem onblur="validacao("+@contagem+")">
<input type="number" class = "form-control" id="meusInputs"+contagem onblur="validacao("+@contagem+")">
</div>
<br/>
contagem++ // Usado no foreach da minha view ASP .NET MVC <br/>
<input type="submit" value="Salvar" id="btn-salvar">

During the filling of this page, I perform a validation in which the sum of a line does not exceed 8, if it exceeds the text of all inputs number that line becomes red and the submit gets disabled.

This validation I perform, OBLIGATORILY, in the onblur of EACH input number. However, as I follow the completion and validation (the others inputs number) become correct (i.e., below 8), my submit back to being enabled and my doubt is:

How do I make sure that if there is at least one input number with the text in red, my submit continue DISABLED?

Answer 1

For ease, place a class on each line (I put linhas). So you can select them and make a loop on them, using the .each jQuery. The idea is to go through each line and add inputs by index (:eq(0) are the first, :eq(1) seconds etc.). If the values are greater than 8, disable the button and change the colors (see comments in the code):

$("[type=number]").on("blur", function(){
   
   // seleciona as linhas
   var linhas = $(".linhas");
   
   // número de inputs por linha
   var num_inps = 3;
   
   // desabilita começa com false
   var desabilita = false;
   
   for(var x=0; x<num_inps; x++){

      // valor da soma começa com 0
      var soma = 0;
      
      // percorre cada linha
      linhas.each(function(){
         soma += Number($("input:eq("+x+")", this).val()) || 0;
      });

      // se for maior que 8 a soma dos campos da linha
      if(soma > 8) desabilita = true;

      // altera as cores
      linhas.each(function(){
         $("input:eq("+x+")", this).css("color", soma > 8 ? "red" : "black");
      });
      
   }
      
   // desabilita ou habilita o botão de for true ou false
   $("[type=submit]").prop("disabled", desabilita ? true : false);
   
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h3>Media de Notas</h3>
<div class="form-inline linhas">
   <p> Maria </p>
   <input type="number" class = "form-control"><input type="number" class = "form-control"><input type="number" class = "form-control">
</div>
<div class="form-inline linhas">
   <p> Joao </p>
   <input type="number" class = "form-control"><input type="number" class = "form-control"><input type="number" class = "form-control">
</div>
<br/>
<input type="submit" value="Salvar">

No need to use onblur and id’s in the fields.