如何永久禁用从服务器数据通过循环生成的按钮？点击后及页面重新加载后均保持禁用状态

嘿，我懂你要做的事儿——那些从数据库动态生成的按钮，点完之后就得永久禁用，哪怕刷新页面也不能再点。这事儿得结合状态存储来实现，给你两套方案，按需选就行：

方案一：前端LocalStorage快速实现（适合无需跨设备同步的场景） #

这个方案不用改后端，直接在前端存状态，简单快速：

1. 修正按钮生成的PHP代码 #

首先得给每个按钮一个唯一标识（你原来的代码里所有按钮ID都是registedButton，这会冲突，必须改成动态的）：

<div class="panel-group" id="posts"> 
    <?php while($row = $query->fetch(PDO::FETCH_ASSOC)) { 
        $acronym = $row["Acronym"];
    ?> 
    <button 
        id='registedButton-<?php echo $acronym; ?>' 
        type='button' 
        onclick='disablePermanently(this)' 
        data-id='<?php echo $acronym; ?>'
    >Applied</button>
    <?php } ?>
</div>

2. 编写JavaScript处理逻辑 #

实现点击禁用+本地存储，以及页面加载时恢复状态：

// 点击按钮时禁用并记录状态
function disablePermanently(button) {
    // 先禁用按钮
    button.disabled = true;
    button.style.opacity = '0.6'; // 可选：加个视觉效果，让用户一眼看出按钮不能点了

    // 获取按钮的唯一标识（就是你存在data-id里的Acronym）
    const buttonKey = button.dataset.id;

    // 从localStorage读取已禁用的按钮列表，没有的话就初始化空数组
    let disabledButtons = JSON.parse(localStorage.getItem('disabledButtons')) || [];
    
    // 避免重复添加
    if (!disabledButtons.includes(buttonKey)) {
        disabledButtons.push(buttonKey);
        localStorage.setItem('disabledButtons', JSON.stringify(disabledButtons));
    }
}

// 页面加载完成后，把之前禁用的按钮重新设为禁用状态
window.addEventListener('load', () => {
    const disabledButtons = JSON.parse(localStorage.getItem('disabledButtons')) || [];
    disabledButtons.forEach(key => {
        const targetBtn = document.querySelector(`button[data-id="${key}"]`);
        if (targetBtn) {
            targetBtn.disabled = true;
            targetBtn.style.opacity = '0.6';
        }
    });
});

这个方案的优缺点：

• 优点：零后端修改，快速上线
• 缺点：状态存在用户浏览器本地，清除缓存或换设备后会失效

方案二：后端数据库持久化（永久生效，适合跨设备同步场景） #

如果要真正的“永久”，就得把状态存在数据库里，不管用户换啥设备，都能保持禁用状态：

1. 先修改数据库表 #

在你存储按钮对应数据的表（比如假设是posts或类似的表）里加一个字段，比如is_disabled，类型选BOOLEAN，默认值设为false。

2. 调整PHP生成按钮的逻辑 #

页面加载时直接从数据库读取状态，渲染时就把已禁用的按钮设为禁用：

<div class="panel-group" id="posts"> 
    <?php while($row = $query->fetch(PDO::FETCH_ASSOC)) { 
        $acronym = $row["Acronym"];
        $isDisabled = $row["is_disabled"];
    ?> 
    <button 
        id='registedButton-<?php echo $acronym; ?>' 
        type='button' 
        onclick='disableViaBackend(this)' 
        data-id='<?php echo $acronym; ?>'
        <?php echo $isDisabled ? "disabled" : ""; ?>
    >Applied</button>
    <?php } ?>
</div>

3. 编写前端AJAX和后端接口 #

前端JavaScript（发送请求到后端更新状态）

function disableViaBackend(button) {
    const buttonKey = button.dataset.id;

    // 用fetch发送POST请求到后端接口
    fetch('disable-button.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `acronym=${encodeURIComponent(buttonKey)}`
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            // 更新按钮状态
            button.disabled = true;
            button.style.opacity = '0.6';
        } else {
            alert('禁用失败啦，再试试？');
        }
    })
    .catch(err => {
        console.error('请求出错:', err);
        alert('网络出问题了，稍后再试');
    });
}

后端disable-button.php（处理请求并更新数据库）

<?php
// 这里替换成你自己的PDO数据库连接代码
$dbHost = 'localhost';
$dbName = '你的数据库名';
$dbUser = '你的用户名';
$dbPass = '你的密码';

try {
    $pdo = new PDO("mysql:host=$dbHost;dbname=$dbName;charset=utf8", $dbUser, $dbPass);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e) {
    die(json_encode(['success' => false, 'error' => '数据库连接失败']));
}

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['acronym'])) {
    $acronym = $_POST['acronym'];

    // 准备更新语句，防止SQL注入
    $stmt = $pdo->prepare("UPDATE 你的表名 SET is_disabled = 1 WHERE Acronym = :acronym");
    $stmt->bindParam(':acronym', $acronym);

    if ($stmt->execute()) {
        echo json_encode(['success' => true]);
    } else {
        echo json_encode(['success' => false, 'error' => '更新失败']);
    }
} else {
    echo json_encode(['success' => false, 'error' => '无效请求']);
}
?>

这个方案的优缺点：

• 优点：状态存在数据库，真正永久生效，跨设备同步
• 缺点：需要修改数据库和编写后端接口，适合有后端开发能力的场景

额外注意点 #

• 绝对不要给多个按钮设置相同的ID！你原来的代码里所有按钮ID都是registedButton，这会导致DOM冲突，必须改成动态唯一的，比如我上面用registedButton-<?php echo $acronym; ?>
• 可以给禁用的按钮加一些CSS样式，比如变灰、鼠标变禁用指针，提升用户体验

内容的提问来源于stack exchange，提问作者Vikas vikas