<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <main class="container pt-5"> <button type="button" class="btn btn-danger attendance-control" data-state="attendant"> <span class="attendance-label">Remover Presença</span> <span class="attendance-state badge badge-success">Presente</span> </button> <button type="button" class="btn btn-success attendance-control" data-state="absent"> <span class="attendance-state badge badge-danger">Ausente</span> <span class="attendance-label">Adicionar Presença</span> </button> </main>

$(document).ready(function() { $('.attendance-control[data-state="attendant"] .attendance-label').html('Remover Presença?'); $('.attendance-control[data-state="absent"] .attendance-label').html('Adicionar Presença?'); $('.attendance-control').on('click', function() { var button = $(this); if (button.prop('data-state') == 'absent') { button.prop('disabled', 'disabled'); button.html('Confirmando Presença...'); setTimeout(function(){ button.html('Presente, Remover?'); button.prop('data-state', 'attendant'); button.addClass('btn-danger').removeClass('btn-success'); button.removeProp('disabled'); }, 1500); } else { button.prop('disabled', 'disabled'); button.html('Cancelando Presença...'); setTimeout(function(){ button.html('Ausente, Confirmar?'); button.prop('data-state', 'absent'); button.addClass('btn-success').removeClass('btn-danger'); button.removeProp('disabled'); }, 1500); } }); });