单击另一个按钮后禁用两个按钮

Question

因此，一旦我成功单击“关闭”按钮，我需要能够禁用两个按钮（批准和返回按钮）。谁能帮我吗？代码的第一部分是我需要禁用的按钮。

<div class="text-center ">
    <button class="btn m-1 align-items-center btn-success text-center " type="submit" id="approve_button" data-toggle="modal" data-target="#approveModal">Approve</button>   
    <button class="btn btn-secondary m-1 align-items-center text-center" type="submit" id="return_button" data-toggle="modal" data-target="#returnModal">Return</button>       
    </div>


<div>
<button class="btn btn-danger m-5 align-items-center text-center"  id="reject_button" name="reject_button" data-toggle="modal"data-target="#rejectModal" >Close Task</button>
</div>
<?php 
if (isset($_POST["reject-btn"])){ 
    
    $rejectt = mysqli_real_escape_string($con, $_POST["rejectt"]);
    $sql = "UPDATE task SET task_status='closed'  WHERE id_task='$rejectt' ";
    $result_rej = mysqli_query($con, $sql);
    if ($result_rej) {
        $_SESSION['success'] = "Task closed";
        $_SESSION['text'] = "Task has been closed successfully";
        $_SESSION['icon'] = "success";
   
    } else {
        $_SESSION['success'] = "Error";
        $_SESSION['text'] = "Unknown error, please try again";
        $_SESSION['icon'] = "error";
    }

 }
?>
   <?php
    if (isset($_SESSION['success']) && $_SESSION['success'] != '') {
    ?>
        <script>
            swal({
                title: "<?php echo $_SESSION['success']; ?>",
                text: "<?php echo $_SESSION['text']; ?>",
                icon: "<?php echo $_SESSION['icon']; ?>",
                button: "OK";
                
            });
        </script>
    <?php
        unset($_SESSION['success']);
    }
    ?>

Answer 1

单击#Reject_button时，您可以将禁用属性添加到按钮中

$(document).ready(function(){
  $("#reject_button").click(function(){
     $("#approve_button, #return_button").attr("disabled","true");
  });
});

Answer 2

您可以使用普通JavaScript单击#Reject_button时将禁用属性添加到按钮

document.querySelector(document).ready(function(){
  document.querySelector("#reject_button").click(function(){
     document.querySelector("#approve_button, #return_button").attr("disabled","true");
  });
});

Answer 3

您可以使用简单的JS事件处理程序来执行此操作。提供的示例是一种方法。如果将来需要再次启用它们，则需要一个单独的事件处理程序才能删除残疾人属性。

<script>
//you can replace querySelector with getElementById, but I prefer the flexibility of query selector
  document.querySelector('#reject_button').addEventListener('onclick', () => {
    document.querySelector('#approve_button').setAttribute('disabled',"");
    document.querySelector('#return_button').setAttribute('disabled',"");
  });
</script>

Answer 4

如果您需要在Page Refresh之后禁用它们，则可以使用此功能。
但最方便的方法是，您应该尝试将按钮状态保存在数据库中。

<div class="text-center ">

    <?php if(isset($_SESSION['disable-buttons']) ){
                if($_SESSION['disable-buttons'] == true){

                    $disabled = "disabled";

                }else{

                $disabled = "";
                
                } 
        }

     ?>

    <button class="btn m-1 align-items-center btn-success text-center " type="submit" id="approve_button" data-toggle="modal" data-target="#approveModal" <?php echo $disabled ?> >Approve</button>   
    <button class="btn btn-secondary m-1 align-items-center text-center" type="submit" id="return_button" data-toggle="modal" data-target="#returnModal" <?php echo $disabled ?> >Return</button>       
    </div>


<div>
<button class="btn btn-danger m-5 align-items-center text-center"  id="reject_button" name="reject_button" data-toggle="modal"data-target="#rejectModal" >Close Task</button>
</div>
<?php 
if (isset($_POST["reject_button"])){ 

    $_SESSION['disable-buttons'] = true; 
    
    $rejectt = mysqli_real_escape_string($con, $_POST["rejectt"]);
    $sql = "UPDATE task SET task_status='closed'  WHERE id_task='$rejectt' ";
    $result_rej = mysqli_query($con, $sql);
    if ($result_rej) {
        $_SESSION['success'] = "Task closed";
        $_SESSION['text'] = "Task has been closed successfully";
        $_SESSION['icon'] = "success";
   
    } else {
        $_SESSION['success'] = "Error";
        $_SESSION['text'] = "Unknown error, please try again";
        $_SESSION['icon'] = "error";
    }

 }
?>
   <?php
    if (isset($_SESSION['success']) && $_SESSION['success'] != '') {
    ?>
        <script>
            swal({
                title: "<?php echo $_SESSION['success']; ?>",
                text: "<?php echo $_SESSION['text']; ?>",
                icon: "<?php echo $_SESSION['icon']; ?>",
                button: "OK";
                
            });
        </script>
    <?php
        unset($_SESSION['success']);
    }
    ?>