Show and hide button with jQuery

Asked

Viewed 441 times

5

I have the following buttons:

inserir a descrição da imagem aqui

Below the button INCLUDE, has a button ETCH, that is set as HIDE():, when I click the button INCLUDE, I want the include button to be set as HIDE();, and the button ETCH as SHOW();.

$(function () {
  setDisabled(true);

  $("#IniciarTarefa").on("click", function (e) {
      $("#IniciarTarefa").hide();
      $("#submeter").show();
      e.preventDefault();
      setDisabled(false);

  });

  $("#FinalizarTarefa").on("click", function (e) {
      e.preventDefault();
      setDisabled(true);
  });

  function setDisabled(state) {
      $('.desabilita input,select,textarea, checkbox').each(function () {
          $("#submeter").hide();
          $(this).prop("disabled", state);
      });
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn botoes" type="submit" id="IniciarTarefa" name="IniciarTarefa">
  <img src="~/Content/iconBtn/novo_16x16.png" />
  Incluir
</button>
<button class="btn botoes" type="submit" for="frmCliente" id="submeter"  name="IniciarTarefa">
  <img src="~/Content/iconBtn/gravar_16x16.png" />
  Gravar
</button>

That way, the button ETCH, is coming set as HIDE(); and when I click on INCLUDE, the same disappears, but the save button does not appear. Someone knows why?

jquery

2 answers

6


It is because after try to show off the button #submeter inside the button click event #IniciarTarefa, you are calling the function setDisabled() which again hides the button.

So just condition the line $("#submeter").hide(); in a if to hide the button only when the parameter state of function setDisabled() for true:

if(state) $("#submeter").hide();

Example:

$(function () {
     setDisabled(true);

     $("#IniciarTarefa").on("click", function (e) {
         $("#IniciarTarefa").hide();
         $("#submeter").show();
         e.preventDefault();
         setDisabled(false);
         
     });

     $("#FinalizarTarefa").on("click", function (e) {
         e.preventDefault();
         setDisabled(true);
     });

     function setDisabled(state) {
         $('.desabilita input,select,textarea, checkbox').each(function () {
             if(state) $("#submeter").hide();
             $(this).prop("disabled", state);
         });
     }
 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="desabilita">
   <input>
</div>
<button id="IniciarTarefa">Incluir</button>
<button id="submeter">Gravar</button>

  • 1

    really, that was it!!!!! thank you for the strength! !!!

4

Hit add "Hidden" attribute to buttons:

    $(function () {
        setDisabled(true);

        $("#IniciarTarefa").on("click", function (e) {
            $("#IniciarTarefa").attr("hidden", "true");
            $("#submeter").removeAttr("hidden");
            e.preventDefault();
            setDisabled(false);
            
        });

        $("#FinalizarTarefa").on("click", function (e) {
            e.preventDefault();
            setDisabled(true);
        });

        function setDisabled(state) {
            $('.desabilita input,select,textarea, checkbox').each(function () {
                $("#submeter").hide();
                $(this).prop("disabled", state);
            });
        }
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btn botoes" type="submit" id="IniciarTarefa" name="IniciarTarefa">
                                <img src="~/Content/iconBtn/novo_16x16.png" />
                                Incluir
                            </button>
                            <button class="btn botoes" type="submit" for="frmCliente" id="submeter"  name="IniciarTarefa" hidden>
                                <img src="~/Content/iconBtn/gravar_16x16.png" />
                                Gravar
                            </button>

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.