Home / user-192669

HENRY VARGAS's questions

Martin Hope
HENRY VARGAS
Asked: 2020-09-21 11:41:27 +0800 CST
  • 0

please if you can help me with this: I need the submit button to be disabled until the condition that "total" is equal to or greater than 50 is met. In my code, the "total" is formed by checking the checkboxes of each product.

I'm learning to program and I'm having some problems, I haven't detected the error yet, it may be in the sum of the checkbox values, which are linked to a java code, but I think it's most likely in applying the conditional.

Help please, here is the code.

$(document).ready(function() {

  $(document).on('click keyup', '.mis-checkboxes,.mis-adicionales', function() {
    calcular();
  });

});

function calcular() {
  var tot = $('#total');
  tot.val(0);
  $('.mis-checkboxes,.mis-adicionales').each(function() {
    if ($(this).hasClass('mis-checkboxes')) {
      tot.val(($(this).is(':checked') ? parseFloat($(this).attr('tu-attr-precio')) : 0) + parseFloat(tot.val()));
    } else {
      tot.val(parseFloat(tot.val()) + (isNaN(parseFloat($(this).val())) ? 0 : parseFloat($(this).val())));
    }
  });
  var totalParts = parseFloat(tot.val()).toFixed(2).split('.');
  tot.val('$' + totalParts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",") + '.' + (totalParts.length > 1 ? totalParts[1] : '00'));
}
if (true) {}
<!DOCTYPE html>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<html>

 <head>

  <td>Productos: </td>
  <br>
  <br>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <table width="500" border="2">
    <ul>
      <tr>

        <td>
          <input type="checkbox" tu-attr-precio="35" id="Café" class="mis-checkboxes" name="checkbox[]" value="Café">
          <label for="Café">Café</label>
          <br></td>
        <td>35</td>
      </tr>

      <tr>

        <td>


          <input type="checkbox" tu-attr-precio="29" id="Té" class="mis-checkboxes" name="checkbox[]" value="Te">
          <label for="Té">Té</label>
          <br></td>

        <td>29</td>
      </tr>



      <td>


        <input type="checkbox" tu-attr-precio="28" id="chocolate" class="mis-checkboxes" name="checkbox[]" value="chocolate">
        <label for="chocolate">chocolate</label>
        <br></td>

      <td>28</td>
      </tr>


      <td>
        <input type="checkbox" tu-attr-precio="10" id="choclo" class="mis-checkboxes" name="checkbox[]" value="choclo">

        <label for="choclo">choclo</label>

        <br></td>

      <td>10</td>


      <table>

      </table>
      <br>
      <label><strong>Total</strong><label>
<input type="text" id="total" placeholder="0.00"required>
  <script>
                          
          if (total.value <= 50) {
            console.log("Se muestra")
            enviar.removeAttribute('disabled')
          } else {
            enviar.setAttribute('disabled', "true");
          }
    
</script>

<input type="submit"  id="enviar" value="Enviar" disabled>
</html>

validación