需要 Javascript 代码帮助 - 单击四个按钮中的一个后如何禁用按钮（5 个按钮）

Posted 2023-05-09

【中文标题】需要 Javascript 代码帮助 - 单击四个按钮中的一个后如何禁用按钮（5 个按钮）

【英文标题】：Need assistance with Javascript Code - How to disable buttons (5 buttons) after clicking 1 of the four buttons

【发布时间】：2020-10-12 22:03:40

【问题描述】：

美好的一天，

所以我有三个页面包含以下脚本 单击签名按钮后，我想禁用此按钮（签名按钮）以及其他 4 个按钮，例如（添加、更新、更改状态、删除）

请注意我之前提到的按钮与下面的签名脚本具有相似的脚本，只是按钮执行的实际功能不同，例如添加按钮将插入新记录，更新将更新记录等）

任何帮助将不胜感激。

脚本 1 index.php

$(document).on('click','.sign', function()
    var expenditureid = $(this).attr("id");

    var btn_action = 'sign';
    if(confirm("Are you sure you want to sign this expenditure?"))
    
        $.ajax(
            url:"expenditure_action.php",
            method:"POST",
            data:expenditureid:expenditureid, btn_action:btn_action,
            success:function(data)
            
                $('#alert_action').fadeIn().html('<div class="alert alert-info">'+data+'</div>');
                expendituredataTable.ajax.reload();
            
        )
    
    else
    
        return false;
    
);

脚本 2 action.php

            if($_POST['btn_action'] == 'sign') 
            $signed = "yes";
                $query = "
                UPDATE expenditure
                set checking_officer = :checking_officer,
                modified_by = :modified_by,
                signed = :signed

            WHERE expenditureid = :expenditureid
                ";
                $statement = $connect->prepare($query);
                $statement->execute(
                    array(
                            ':checking_officer'                     =>  $_SESSION["user_id"],
                                    ':modified_by'                      =>  $_SESSION["user_id"],
                            ':signed'                       =>  $signed,
                        ':expenditureid'                        =>  $_POST["expenditureid"]
                    )
                );

脚本 3 fetch.php

$sub_array[] = "Sign ";

$sub_array[] = "删除";

【参考方案1】：

你可以使用这个功能

function disable_buttons (buttons) 
 buttons.each(function()
   $(this).attr("disabled", "disabled")
 )

【讨论】：

谢谢你试试看！

【参考方案2】：

$(".sign").on("click", function() 
  const $otherButtons = $(this).closest("tr").find("button");
  $otherButtons.prop(disabled: true);
);

<table>
  <tr>
    <td><button type="button">Update</button></td>
    <td><button type="button" class="sign">Sign</button></td>
    <td><button type="button">Delete</button></td>
    <td><button type="button">Change Status</button></td>
  </tr>
</table>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

【讨论】：

谢谢..我试过这个脚本但是页面重新加载后按钮会重新启用

@Ria JS 没有状态，除非您将其存储在数据库中或本地用户计算机上（即：使用像 localStorage 这样的存储 API）。您应该 - 在随后的页面请求中知道如何处理这些禁用状态 - 这应该由您的后端提供服务。