При заполнении полей + активная галочка мы активируем кнопку

Question

У меня есть форма с разными полями, и я пытаюсь сделать так, чтобы кнопка «Отправить» не была активна до тех пор, пока все записи и флажок принятия не будут заполнены и проверены, фактически, если запись удаляется после этого, кнопка снова отключается.

Дело в том, что у меня корректно работают входы, но я не могу заставить флажок работать должным образом, если я получаю его до тех пор, пока не нажму на него и все не заполнится, кнопка не активируется , но если я снова снимаю флажок, кнопка все еще включена.

Мой код:

(function() {
        $('#infoEquipo > div > div > div > input, textarea').keyup(function() {
          $("#micheckbox334").on("click", function(){
    
            var empty = false;
            $('form > div > div > div > input, textarea').each(function() {
              if ($(this).val() == '' && $(this).is(":checked")){ // <- ambas deben cumplirse
                empty = true;
              }
            });
            if (empty) {
                $('#llamada223').attr('disabled', 'disabled');
    
            } else {
                $('#llamada223').removeAttr('disabled');
            }
          });
         });
      })()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<form enctype="multipart/form-data" id="infoEquipo" method="post" class="formInfo">
      <div class="row">
        <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
          <div class="separaInput">
            <i class="fas fa-user form-control-email2"></i>
            <input type="text" class="form-control myInput2" name="nombre" id="nombreLL" placeholder="Persona de contacto" required >
          </div>
          <div class="separaInput">
            <i class="fas fa-mobile-alt form-control-email2"></i>
            <input type="text" class="form-control myInput2" name="telefono" id="telefono" placeholder="Teléfono"required>
          </div>
          <div class="separaInput">
            <i class="fas fa-envelope form-control-email2"></i>
            <input type="text" class="form-control myInput2" name="email" id="email" placeholder="Email"  required>
          </div>
          <div class="separaInput">
            <i class="fas fa-map-marker-alt form-control-email2"></i>
            <input type="text" class="form-control myInput2" name="ciudad" id="cuidad" placeholder="Ciudad" required>
          </div>
        </div>
        <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
          <div class="separaInput">
            <i class="fas fa-building form-control-email2"></i>
            <input type="text" class="form-control myInput2" name="centro" id="centro" placeholder="Nombre del centro" required>
          </div>
          <div class="separaInput" style="display:none;">
            <i class="fas fa-sign-in-alt form-control-email2"></i>
            <input type="text" class="form-control myInput2" name="equipo" id="equipo" value="<?php echo $encu['nombreEquipo'];?> <?php echo $encu['small'];?>">
          </div>
          <div class="form-group separaInput2">
          
            <textarea class="form-control myInput3" name="mensaje" id="mensaje" rows="5" required></textarea>
          </div>
        </div>
      </div>
      <div class="col-12 center">
        <div class="">
          <input type="checkbox" class="micheckbox334" id="micheckbox334" style="display:inline-block;">
        </div>
      </div>
      <div id="mensajeResp" style="text-align:center" style="margin-bottom:2%;">

      </div>
      <button  type="submit" id="llamada223" class="btn btn-primary btnNews2 espacioEnvia" disabled="disabled">MÁS INFORMACIÓN</button>
    </form>

Answer 1

Вы можете попробовать это. Я рекомендую использовать .prop(), когда вы имеете дело с html атрибутами, особенно если вы продолжаете их менять условно.

(function() {
  var button = $('#llamada223');
  var checkbox = $("#micheckbox334");
  var inputs = $('.text-input');
  
  function switchButton(state){
    if(state === "off"){
      button.prop('disabled', true);
    }else if(state === "on"){
      button.prop('disabled', false);
    }
  }
  
  function inputsAreField(){
    var input_are_filled = true;
    inputs.each(function(index, input){
      if( $(input).val() === undefined || 
          $(input).val() === '' || 
          !$(input).val()){
        input_are_filled = false;
      }
    });
    return input_are_filled;
  }
  
  checkbox.change(function(){
    if(inputsAreField() && checkbox.is(":checked")){
      switchButton("on");
    }else{
      switchButton("off");
    }
  });
  
  inputs.each(function(index,input){
    $(input).keyup(function(){
       if(inputsAreField() && checkbox.is(":checked")){
          switchButton("on");
          return;
        }
        switchButton("off");
     });
  });
})()

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form enctype="multipart/form-data" id="infoEquipo" method="post" class="formInfo">
      <div class="row">
        <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
          <div class="separaInput">
            <i class="fas fa-user form-control-email2"></i>
            <input type="text" class="form-control text-input myInput2" name="nombre" id="nombreLL" placeholder="Persona de contacto" required >
          </div>
          <div class="separaInput">
            <i class="fas fa-mobile-alt form-control-email2"></i>
            <input type="text" class="form-control text-input myInput2" name="telefono" id="telefono" placeholder="Teléfono"required>
          </div>
          <div class="separaInput">
            <i class="fas fa-envelope form-control-email2"></i>
            <input type="text" class="form-control text-input myInput2" name="email" id="email" placeholder="Email"  required>
          </div>
          <div class="separaInput">
            <i class="fas fa-map-marker-alt form-control-email2"></i>
            <input type="text" class="form-control text-input myInput2" name="ciudad" id="cuidad" placeholder="Ciudad" required>
          </div>
        </div>
        <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
          <div class="separaInput">
            <i class="fas fa-building form-control-email2"></i>
            <input type="text" class="form-control text-input myInput2" name="centro" id="centro" placeholder="Nombre del centro" required>
          </div>
          <div class="separaInput" style="display:none;">
            <i class="fas fa-sign-in-alt form-control-email2"></i>
            <input type="text" class="form-control text-input myInput2" name="equipo" id="equipo" value="<?php echo $encu['nombreEquipo'];?> <?php echo $encu['small'];?>">
          </div>
          <div class="form-group separaInput2">
          
            <textarea class="form-control text-input myInput3" name="mensaje" id="mensaje" rows="5" required></textarea>
          </div>
        </div>
      </div>
      <div class="col-12 center">
        <div class="">
          <input type="checkbox" class="micheckbox334" id="micheckbox334" style="display:inline-block;">
        </div>
      </div>
      <div id="mensajeResp" style="text-align:center" style="margin-bottom:2%;">

      </div>
      <button  type="submit" id="llamada223" class="btn btn-primary btnNews2 espacioEnvia" disabled="disabled">MÁS INFORMACIÓN</button>
    </form>