在点击拒绝/关闭后禁用两个按钮



我的任务是能够在单击拒绝按钮后禁用批准和返回按钮。拒绝按钮表示关闭项目。这些是我的密码。谁能帮我弄清楚如何禁用这些按钮?这是按钮的样子。

<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>

您可以通过id获取按钮并禁用它们,如下所示:

document.getElementById("approve").disabled = true;
document.getElementById("return").disabled = true;

完整代码

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.");
}
});
}

您需要包含classname "disable"到批准&;返回按钮和你的javascript代码应该是这样的:

<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>

最新更新