Change button class after filling all fields

Question

I have a button that needs to be enabled when the user finishes filling the fields, but it needs to be changed the class when it is enabled...

when the button is disabled I would need that while the fields are not filled the button stay in satus disabled and with the gray css class, after being filled the fields the button is enabled and with the green css class, that would be in jQuery? How do I make it work?

.btn-pdf {
  text-align: center;
  float: right;
  margin: 0 5px;
}

.btn-pdf .fa-thumbs-down {
  background-color: #f3f3f3;
  color: #787878;
  padding: 20px;
  border-radius: 50px;
}

.btn-pdf .fa-thumbs-down:hover {
  background-color: #fbfbfb;
  transition: 0.2s;
}

.btn-pdf .fa-thumbs-up {
  background-color: #59bd59;
  color: #FFFFFF;
  padding: 20px;
  border-radius: 50px;
}

.btn-pdf .fa-thumbs-up:hover {
  background-color: #68cb68;
  transition: 0.2s;
}

.btn-pdf a {
  text-align: center;
  font-family: 'KG Blank Space Solid';
  color: #303030;
  font-size: 13px;
}

.btn-pdf a:hover {
  text-decoration: none;
}

<form id="msform" method="post">

<div class="form-group">
  <label>Telefone Válido*</label>
  <input id="celular" type="text" class="form-control" name="celular" placeholder="Telefone">
</div>

<div class="form-group">
  <label>Selecione uma Opção</label>
  <select class="form-control" id="list-lugar" name="unidade">
    <option value="0" disabled="true" selected="true">Selecione uma Unidade</option>
    <option name= "PMA" value="200">Shopping 1</option>
    <option name = "BRB" value="200">Shopping 2</option>
  </select>
</div>

</form>

<div class="btn-pdf">
   <a href="">
      <i class="far fa-thumbs-down fa-2x"></i><br>Baixar PDF
   </a>
 </div>
 
<div class="btn-pdf">
  <a href="">
      <i class="far fa-thumbs-up fa-2x"></i><br>Baixar PDF
  </a>
</div>

Answer 1

I didn’t understand if it was to have two buttons or one and change. Well I think it’s the second option, so I made a code here that should show you how field verification works.

$(function(){
	// Definimos um evento para os campos, quando alterarem ele deve verificar cada campo.
	$("#msform").find("input,textarea,select").on("change paste keyup",verificarCampos);
  
  function verificarCampos(){
  	var falha=false;
    $("#msform").find("input,textarea,select").each(function(){
    	// Se o valor for vazio, define que houve falha:
    	if($(this).val()=="" || $(this).val()==null) falha=true;
    });
    // Se falhou:
    if(falha) $(".btn-pdf").addClass("cinza");
    else $(".btn-pdf").removeClass("cinza");
  }
  // vou chamar a função assim que o código iniciar, para já definir o botão como inválido:
  verificarCampos();
  
  $(".btn-pdf a").on("click",function(e){
    if($(this).parent().is(".cinza")){
      alert("Informe os dados para continuar");
      e.preventDefault();
    }
  });
});

.btn-pdf {
  text-align: center;
  float: right;
  margin: 0 5px;
}

.btn-pdf .fa-thumbs-down {
  background-color: #f3f3f3;
  color: #787878;
  padding: 20px;
  border-radius: 50px;
  display:none;
}

.btn-pdf .fa-thumbs-down:hover {
  background-color: #fbfbfb;
  transition: 0.2s;
}

.btn-pdf .fa-thumbs-up {
  background-color: #59bd59;
  color: #FFFFFF;
  padding: 20px;
  border-radius: 50px;
}

.btn-pdf .fa-thumbs-up:hover {
  background-color: #68cb68;
  transition: 0.2s;
}

.btn-pdf a {
  text-align: center;
  font-family: 'KG Blank Space Solid';
  color: #303030;
  font-size: 13px;
}

.btn-pdf a:hover {
  text-decoration: none;
}

.btn-pdf.cinza .fa-thumbs-up{
  display:none;
}
.btn-pdf.cinza .fa-thumbs-down{
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.11/js/all.js"></script>
<form id="msform" method="post">

<div class="form-group">
  <label>Telefone Válido*</label>
  <input id="celular" type="text" class="form-control" name="celular" placeholder="Telefone">
</div>

<div class="form-group">
  <label>Selecione uma Opção</label>
  <select class="form-control" id="list-lugar" name="unidade">
    <option value="" disabled="true" selected="true">Selecione uma Unidade</option>
    <option name= "PMA" value="200">Shopping 1</option>
    <option name = "BRB" value="200">Shopping 2</option>
  </select>
</div>

</form>

<div class="btn-pdf">
   <a href="http://google.com" target="_blank">
      <i class="far fa-thumbs-down fa-2x"></i>
      <i class="far fa-thumbs-up fa-2x"></i><br>Baixar PDF
   </a>
 </div>

But beware: This code does not check whether the number entered is valid. Also do not block the click on the button if the gray class you said is in the element.

Explaining what I did: I used jQuery to run in all fields, search for changes and then check that all fields have been filled in. Then we add the gray class on the button, with the gray class the button hides the "positive" icon and shows the "negative". More explanation in the code comment.