保持按钮禁用，直到当前页面重新加载（使用 Jquery）答案

【问题标题】：Keep button disabled till the current page reloads (using Jquery)保持按钮禁用，直到当前页面重新加载（使用 Jquery）
【发布时间】：2020-07-14 08:12:56
【问题描述】：

我在index.php 中有一个搜索栏，当我输入 ID 时，会从fetch.php 获取 SQL 数据。 fetch.php 包含每行 SQL 数据的“AddToZip”按钮。当我点击一个选定的按钮时，选定的按钮被禁用（一直到这里）。但是，当我清除搜索栏以写入不同的 ID 或可能相同的 ID 时，“AddToZip”的所有禁用按钮都会重新激活/启用。当用户多次使用搜索栏并且无论如何只有在用户刷新页面时才启用它们时，如何使它们保持禁用状态。

index.php

<php code>

<?php
session_start();
...
...
...
?>

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>LiveData</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
 </head>
 <body>
  <div class="container">
   <br />
   <h2 align="center">Live Data Search</h2><br />
   <div class="form-group">
    <div class="input-group">
     <span class="input-group-addon">Search</span>
     <input type="text" name="search_text" id="search_text" placeholder="Search by ID" class="form-control" />
    </div>
    
   </div>
   <p>
        <a href="logout.php" class="btn btn-danger">Sign Out of Your Account</a>
        
    </p>
    
   <br />
   <div id="result"></div>
  </div>
</html>



<script>
$(document).ready(function(){
    $('#search_text').keyup(function(){
        var txt = $(this).val();
        if(txt != '')
        {
            $.ajax({
                url:"fetch.php",
                method: "post",
                data: {search:txt},
                dataType: "text",
                success: function(data)
                {
                    $('#result').html(data);
                }
            });
        }
        else
            if(txt == '')
        {
            $.ajax({
                url:"null.php",
                method: "post",
                data: {search:txt},
                dataType: "text",
                success: function(data)
                {
                    $('#result').html(data);
                }
            });
        }
        
            
    });
});

</script>

<script>

    var addToZip = function(id, btn) {
        $.ajax({
        
        url:"AddToZip.php?id=" + id,
        success: function(data) {
            btn.disabled = true;
        }
    });
};
</script>

fetch.php

<?php
...

if(mysqli_num_rows($result) > 0)
{
 $output .= '<h4 align = "center">Search Result</h4>';
 $output .= '<div class="table-responsive">
                <table class = "table table bordered">
                   <tr>
                        <th>ID</th>                                 
                    </tr>';
                    
    while($row = mysqli_fetch_array($result))
    {
                
        $output .= '
                <tr>
                    <td>'.$row["ID"].'</td>
                    <td><button type="button" class="btn btn-primary" onclick="addToZip(\''.$row["ID"].'\', this)"><i class="fa fa-pdf" aria-hidden="true"> </i>Add to Zip</button></td>
                </tr>
            ';
    }
    echo $output;
    
}
...

?>

【问题讨论】：

请用浏览器的纯html输出替换您的php代码。
@Reporter 根据要求我已经添加了 index.php 纯粹从页面的视图源。

标签： php jquery mysql ajax

【解决方案1】：

可以添加AddToZip.php的代码吗？

您可以将所有 ids 存储到会话值中，并检查 id 是否包含在 fetch.php 上的此数组中。

AddToZip.php：

session_start();
if (!isset($_SESSION['added_to_zip_ids']))
    $_SESSION['added_to_zip_ids'] = [];
if (array_search($_GET['id'], $_SESSION['added_to_zip_ids']) === false)
    $_SESSION['added_to_zip_ids'][] = $_GET['id'];

fetch.php：

<?php
...

session_start();
if (!isset($_SESSION['added_to_zip_ids']))
    $_SESSION['added_to_zip_ids'] = [];

if(mysqli_num_rows($result) > 0)
{
 $output .= '<h4 align = "center">Search Result</h4>';
 $output .= '<div class="table-responsive">
                <table class = "table table bordered">
                   <tr>
                        <th>ID</th>                                 
                    </tr>';
                    
    while($row = mysqli_fetch_array($result))
    {
                
        $output .= '
                <tr>
                    <td>'.$row["ID"].'</td>
                    <td><button '.(array_search($row["ID"], $_SESSION['added_to_zip_ids']) === false ? '' : 'disabled').' type="button" class="btn btn-primary" onclick="addToZip(\''.$row["ID"].'\', this)"><i class="fa fa-pdf" aria-hidden="true"> </i>Add to Zip</button></td>
                </tr>
            ';
    }
    echo $output;
    
}
...

?>

要清除存储的值，您有两种解决方案：

保留其他会话数据

session_start();
if (isset($_SESSION[' added_to_zip_ids']))
未设置($_SESSION['add_to_zip_ids']);
清除一切

session_start();
session_unset();

这些行可以在服务器上的任何位置。

【讨论】：

嘿，非常感谢它有效。只有一个问题，如何结束此会话以重新激活所有禁用的 AddToZip 按钮？那就是当它被称为“Download.php”或什么可能是更好的解决方案时，我可以从另一个 php 页面结束会话吗？
我只能在明天之前奖励赏金。所以肯定会在明天之前奖励你。

【解决方案2】：

我建议使用事件处理程序“keyup”（就像您已经做的那样）和/或“更改”处理程序来激活功能（例如 check_disable_status）

$('#search_text').keyup(check_disable_status)
$('#search_text').change(check_disable_status)

你也应该在 DOM 的“就绪”状态下启动这个函数。

在此函数中，您只需检查字段的当前“状态”，或者您的业务逻辑的其他依赖项，并将字段设置为始终处于启用或禁用状态。

【讨论】：

您好，谢谢。但我不明白如何使用 check_disable_status。可以举个例子吗？
嗨，只需创建一个 JS 函数： check_disable_status = function(){ let my_element = $(this) // this = search_text 元素 -> 将其转换为 jquery 元素 // 现在检查您的业务逻辑 // 例如如果 my_element 为空 -> 将 my_element 设置为禁用，或者您必须检查什么（我不知道禁用或启用您的字段的相关内容）}
不抱歉，但这不支持我的逻辑。 Fetch.php 实际上是在刷新整个会话时重新启用禁用的按钮。我想我需要一个从那里调用的函数来保持禁用的按钮 - 禁用。
嘿赛义夫，我认为问题出在你的 js 代码的这一部分：