how to make Submit be enabled after the text value is greater than x dynamically?

Question

The code is working if you fill in the input directly and when it is receiving the values dynamically it does not disable, only when I click on it.

var btn = document.getElementById("btn");
var tvalor = document.getElementById("tvalor");

tvalor.addEventListener('keyup', (e) => {
  btn.setAttribute('disabled', 'disabled');  
  const n0 = isNaN(tvalor.value.replace(',','.')) === false;
  const n1 = parseFloat(tvalor.value.replace(',','.'));
  const n2 = typeof n1 === 'number' && isFinite(n1);
  if (n0 && n1 && n2 && n1 >= 13) {
    btn.removeAttribute('disabled');
  }
});

<form>
 <input type="text" id="tvalor">
 <input type="submit" id="btn" disabled>
</form>

Answer 1

If I understood what you said about dynamic filling what you lack is to fire the event keyup after completing the input.

To trigger an event by code use the method EventTarget.dispatchEvent() that triggers an event, Event, to the event target, Eventtarget, specified by invoking the Eventlisteners specified, in an appropriate order.

Your example I modified by adding a button Preencher(btn2) that dynamically fills in the input and triggers the event keyup in tvalor:

var btn = document.getElementById("btn");
var tvalor = document.getElementById("tvalor");

var btn2 = document.getElementById("btn2");

tvalor.addEventListener('keyup', (e) => {
  btn.setAttribute('disabled', 'disabled');
  const n0 = isNaN(tvalor.value.replace(',', '.')) === false;
  const n1 = parseFloat(tvalor.value.replace(',', '.'));
  const n2 = typeof n1 === 'number' && isFinite(n1);
  if (n0 && n1 && n2 && n1 >= 13) {
    btn.removeAttribute('disabled');
  }
});

btn2.addEventListener('click', (e) => {
  tvalor.value = "123";
  //Depois de preenchido dispara um evento no objeto.
  tvalor.dispatchEvent(new Event("keyup"));
});

<form>
  <input type="text" id="tvalor">
  <input type="submit" id="btn" disabled>

  <input type="button" id="btn2" value="Preencher">
</form>

Answer 2

If you use Jquery you can add this codic

    $('#btn').disabled=false;
  

if you do not use add this code:

    document.getElementById('btn').disabled =false
  

Edit: it is complicated to understand your question, but because of what you’ve allotted input it has to be May that x to disable, as you use jquery you can enter this code last in the script where you make the value change

    <form>

 <input type="text" id="tvalor" value='13'>
 <input type="submit" id="btn" disabled>
</form>
<script>
var btn = document.getElementById("btn");
var tvalor = document.getElementById("tvalor");

let x =13;        
if(document.getElementById('tvalor').value !='' && document.getElementById('tvalor').value >=x){
        document.getElementById('btn').disabled =false

    }
</script>

Answer 3

I don’t know how this dynamic value is sent/recovered, so I put in the code a function that generates a random value to test the code. Just run the code several times this value changes and when it is greater than 13 disables the button

    var btn = document.getElementById("btn");

    /*######## valor dinamico ########## */
    function random(min, max) {
        return Math.round((Math.random() *( Math.abs(max - min))) + min);
    }
    let dinamico = (random(1, 26));
    /*################################## */
  
      if ( (dinamico !="") && (dinamico >= 13) ) {
      
        btn.removeAttribute('disabled');
        document.getElementById("tvalor").value = dinamico;
        
      }else{
      
        var tvalor = document.getElementById("tvalor");

        tvalor.addEventListener('keyup', (e) => {
          btn.setAttribute('disabled', 'disabled');  
          const n0 = isNaN(tvalor.value.replace(',','.')) === false;
          const n1 = parseFloat(tvalor.value.replace(',','.'));
          const n2 = typeof n1 === 'number' && isFinite(n1);
          if (n0 && n1 && n2 && n1 >= 13) {
            btn.removeAttribute('disabled');
          }
        });
      }

    <form>
     <input type="text" id="tvalor">
     <input type="submit" id="btn" disabled>
    </form>

---

---

With checkboxes would be something like this

 //evento de alteração nos inputs checkbox
    $(":checkbox").on("change", function() {
      //altera o valor #total ao marcar/desmarcar os checkbox
      $("#total").val(function() {
        //declarar uma variável para manter a soma dos valores
        var sum = 0;
        var btn = document.getElementById("btn");
        btn.setAttribute('disabled', 'disabled');
        //Iteração para somar os valores das caixas de seleção marcadas
        $(":checkbox:checked").each(function() {
          sum += ~~$(this).val();
          sumDiv=sum.toFixed(2);
          sumDiv = sumDiv.replace(/\./g,','); 
          $( "#totale" ).text("Valor total do pedido\n R$"+sumDiv);
          if (sum>=13){
            btn.removeAttribute('disabled');
          }else{
            btn.setAttribute('disabled', 'disabled'); 
          }
        });
        return sum;
      });
    });      

    function sanduba1(){};
    function sanduba2(){};
    function cebola(){};
    function tomate(){};
    function milho(){};
    function molho(){};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" value="8" onclick="sanduba1()">
<label>Sanduiche Normal R$ 8,00</label>
<br>

<input type="checkbox" value="10" onclick="sanduba2()">
<label>Super sanduiche R$ 10,00</label>
<br>
      
<input type="checkbox"  value="2" onclick="cebola()">
<label>Cebola</label>
<br>

<input type="checkbox" value="3" onclick="tomate()">
<label>Tomate</label>
<br>

<input type="checkbox" value="4" onclick="milho()">
<label>Milho</label>
<br>

<input type="checkbox" value="2" onclick="molho()">
<label>molho</label>
<br>

<input id="total" style="display: none;">
<div id="totale"></div>
        
<input type="submit" id="btn" disabled>