Release save button with permission

Question

I got a registration chart in a modal, he’s got the save and cancel button, only by filling in all the required input and select it releases the save, and saved in the database, ta all working, only if I go in the change it brings all the options selected as it was saved, only comes the save button released only releases if pass the Focus in all mandatory fields. I would like it to release automatically since all required fields are saved.

this is javascript

jQuery(function() {
                    var $inputs = $(".inpSenha"), $button = $(".btnSalvar1");

                    var limpos = 0;

                    // verificação inicial
                    $inputs.each(function() {
                        var $this = $(this);
                        var val = $this.val();
                        val || limpos++;
                        $this.data("val-antigo", val);
                    });

                    $button.prop("disabled", !!limpos);

                    $inputs.on("change keyup mouseup", function() {
                        var $this = $(this);
                        var val = $this.val();
                        limpos += (val ? 0 : 1)
                                - ($this.data("val-antigo") ? 0 : 1);
                        $this.data("val-antigo", val);
                        $button.prop("disabled", !!limpos);
                    });

                });

this is the Html of the save button

<button type="button" class="btn btn-default btnSalvar1" data-dismiss="modal" ng-click="salvarPessoas()">Salvar</button>

and inSenha and the class that goes in the input or select that will be required who can help me

Answer 1

Create a Event click to the button Alter to release the button Save:

$("id ou classe do botão Alterar").click(function(){
    $(".btnSalvar1").prop("disabled", false);
});

When you close the modal, disable the button again:

$('id da modal').on('hide.bs.modal', function(){
    $(".btnSalvar1").prop("disabled", true);
});

Answer 2

Since you - probably - are using Bootstrap, so when opening the modal, you can use the callback show.bs.modal. Every time you open the modal, the Bootstrap will invoke this function.

Example:

const modal = $('#exampleModal');

modal.on('show.bs.modal', function() {
  /* Realiza a verificação se todos os campos estão preenchidos */
})

Following example:
^{Only "Name" and "Terms" fields are required}

const modal = $('#exampleModal');

modal.on('show.bs.modal', function() {
  checkInputs();
})

modal.on("change keyup mouseup", ".inpSenha", () => {
  checkInputs();
});

function checkInputs() {
  $(".inpSenha").each((index, el) => {
    if (el.value == "") {
      $(modal).find("#save").prop("disabled", true);
      return false;
    } else {
      $(modal).find("#save").prop("disabled", false);
    }
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css" rel="stylesheet" />

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Open</button>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Edit</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">


        <label for="name">Name:</label>
        <input type="text" value="" class="inpSenha" id="name" /><br>

        <label for="username">Username:</label>
        <input type="text" value="" id="username" />
        <Br>
        
        <label for="terms">Terms</label>
        <select id="terms" class="inpSenha">
          <option value="" selected>Select</option>
          <option value="1">Agree</option>
          <option value="0">Disagree</option>
        </select>



      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal" id="save">Save changes</button>
      </div>
    </div>
  </div>
</div>