Desativar botão até todos os campos estarem preenchidos

Criei um Form para fazer Cadastro, sempre que o usuário clica no botão para cadastrar é enviado um e-mail para o ADM.

O meu problema é o seguinte, quando tem algum campo não preenchido e o usuário clica em cadastrar, o email é enviado e só depois o alert do campo obrigatório aparece.

Gostaria de um JS que desativa o botão cadastrar até todos os campos estarem preenchidos corretamente.

E também que quando a pessoa clicasse no Botão cadastrar, ele iria desativar novamente, para evitar o usuário de clicar mais de uma vez e acabar enviando mais emails...

Segue o meu form...

>

Citar

<form id="novo_evento" action="cadastrar(logado).php" method="get" class="padding-center" style="top: 0;">

>

Citar

                      <div class="form-group col-md-6">

                 <label for="txtData">Data:</label>

                 <input type="date" class="form-control" id="txtHorario_saida" name="Start">

             </div>

             

               <div class="form-group col-md-6">

                 <label for="txtHorariosaida">Horario de Saida:</label>

                 <input type="time" class="form-control" id="txtHorario_saida" placeholder="--:--" name="horario_saida">

             </div>

               <div class="form-group col-md-6">

                 <label for="txtRetorno">Horario de Retorno:</label>

                 <input type="time" class="form-control" id="txtHorario_retorno" placeholder="--:--" name="horario_retorno">

             </div>

   

           <div class="form-group col-md-6">

                 <label for="txtLocal">Local de Destino:</label>

                 <input type="text" class="form-control" id="txtLocal" name="Title">

             </div>

             <div class="form-group col-md-6">

             <label for="txtQtdpessoa">Quantidade de pessoas que vão no Carro:</label>

             <input type="text" class="form-control" id="txtQtdpessoa" name="qtdpessoa">

            

              

         </div>

              <div class="form-group col-md-6">

                 

                 <input type="hidden" class="form-control" id="txtmotorista" name="motorista" value="A_definir">

             </div>

             <div class="form-group col-md-6">

                 

                 <input type="hidden" class="form-control" id="txtTotal_lugares" name="total_lugares" value="34" >

             </div>

 <div class="form-group col-md-10"></div>

         <div class="form-row">

             <div class="col">

                 <button type="submit" class="btn btn-primary col-md-12"  name="salvar">Agendar</button>

             </div>

         </div>

     </div>

     </form>