Disable button in modal window using Jquery

Question

I have a modal window with a button, and I would like it to be disabled when pressing the button (a tag), and present "Wait..."

Look at my code:

//#idDivModal4 -> modal
//.btn-enviar-lembrete -> tag a (botão)

 $('#idDivModal4').on('click', '.btn-enviar-lembrete', function(){   
 event.preventDefault();     

     $(this).prop("disabled",true);
     $(this).prop("value","Aguarde.."); 

});

Modal:

...
 <a class="btn btn-danger btn-enviar-lembrete">Enviar lembrete</a>

However, it is not working. What I’m doing wrong?

Answer 1

To create a button you don’t necessarily need to put it inside a tag <a href..., you can simply create with;

<button class="btn-enviar-lembrete">Enviar</button>

Javascript will look like this;

$('.btn-enviar-lembrete').on('click', function() {
    $(this).prop({
        disabled: true,
        innerHTML: 'Aguarde...'
  });
});

But if you prefer you can also put a link tag around;

<a href="">
    <button class="btn-enviar-lembrete">
       Enviar
    </button>
</a>

Remember that the tags a has by default a default behavior that is to "reload the page", so to prevent this link from doing its function padrão, add the parameter event within the function and then tell the jquery to "prevent standard behavior".

$('.btn-enviar-lembrete').on('click', function(event) {
    event.preventDefault();
    $(this).prop({
        disabled: true,
        innerHTML: 'Aguarde...'
  });
});

See working on Jsfiddle

Answer 2

$(".#btn-send-reminder")

Remove the dot before # because it is either a class or an id.

btn-send-reminder = id

.btn-send-reminder = class

Check ahead because the jquery event is classed and the action inside the event is with id and with the dot before id.

Answer 3

Edited:

 $('#idDivModal4 #btn-enviar-lembrete').click(function() {
       $(this).prop("disabled",true);
       $(this).prop("value","Aguarde.."); 
 });

or as your code

  $('#idDivModal4').on('click', '#btn-enviar-lembrete', function(){   
  event.preventDefault();     

 $("#btn-enviar-lembrete").attr("disabled", true);
 $("#btn-enviar-lembrete").attr('value', 'Aguarde...');

besides, you have a confusion between . and # "." -> equals class "#" to object id