My task is to be able to disable the approve and return buttons after clicking the reject button. Reject button means closing a project. These are my codes. Can anybody help me figure out how to disable the buttons?this is what the button looks like.
<div class="text-center ">
<button class="btn m-1 align-items-center btn-success text-center " id="approve">Approve</button>
<button class="btn btn-danger m-1 align-items-center text-center " id="clear" onclick="sweetalertrejects()">Reject</button>
<button class="btn btn-secondary m-1 align-items-center text-center" id="return">Return</button>
</div>
</div>
</div>
<script>
function sweetalertrejects(){
swal("This button means closing the task. You will not be able to revert this action. Do you wish to continue?", {
icon: "info",
buttons: {
cancel: "Cancel",
catch: {
text: "Yes, close this task",
value: "cancel",
},
},
})
.then((value) => {
switch (value) {
case "cancel":
swal("Closed!", "Task has been closed.", "success");
break;
default:
swal("Task has not been closed.");
}
});
}
</script>
You can get the buttons by id and disable them as follows:
document.getElementById("approve").disabled = true;
document.getElementById("return").disabled = true;
Here is whole code
function sweetalertrejects(){
swal("This button means closing the task. You will not be able to revert this action. Do you wish to continue?", {
icon: "info",
buttons: {
cancel: "Cancel",
catch: {
text: "Yes, close this task",
value: "cancel",
},
},
})
.then((value) => {
switch (value) {
case "cancel":
swal("Closed!", "Task has been closed.", "success").then(()=>{
document.getElementById("approve").disabled = true;
document.getElementById("return").disabled = true;
});
break;
default:
swal("Task has not been closed.");
}
});
}
You need to include classname "disable" to the Approve & Return button and your javascript code should look like this:
<script>
$('#clear').click(function() {
swal("This button means closing the task. You will not be able to revert this action. Do you wish to continue?", {
icon: "info",
buttons: {
cancel: "Cancel",
catch: {
text: "Yes, close this task",
value: "cancel",
},
},
})
.then((value) => {
if(value){
$('.disable').attr('disabled','disabled');
swal("Closed!", "Task has been closed.", "success");
}else{
swal("Task has not been closed.");
}
});
});
</script>