实现动态生成按钮的点击后永久禁用与状态持久化

<div class="panel-group" id="posts">  
    <?php  
    // 假设 $query 是从数据库获取数据的PDO结果集
    while($row = $query->fetch(PDO::FETCH_ASSOC))
    {  
    ?>  
        <!-- 为每个按钮生成一个基于其数据的唯一ID，并添加一个公共类 -->
        <button id='registedButton_<?php echo htmlspecialchars($row["Acronym"]); ?>' 
                type='button' 
                class="registedButton" 
                data-id="<?php echo htmlspecialchars($row["Acronym"]); ?>">
            Applied
        </button> 
    <?php } ?>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

// 设置Cookie函数
function setCookie(name, value, days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}

// 获取Cookie函数
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

$(document).ready(function(){
   $(".registedButton").each(function() {
        var buttonId = $(this).attr('id'); // 获取按钮的唯一ID
        if(getCookie(buttonId)){ // 检查是否存在对应ID的Cookie
           $(this).prop('disabled', true); // 如果存在，则禁用按钮
        }
   });
});

$('.registedButton').on('click', function(e) {
    var buttonId = $(this).attr('id'); // 获取被点击按钮的唯一ID
    // 假设我们希望Cookie在一段时间后过期，例如30天。
    // 如果希望永久禁用，可以将days参数设为一个很大的值或不设置过期时间（会话Cookie）。
    setCookie(buttonId, 'disabled', 30); // 将按钮ID和状态保存到Cookie中，有效期30天

    // e.preventDefault(); // 如果按钮有默认行为（如表单提交），可以阻止
    $(this).prop('disabled', true); // 禁用当前点击的按钮

    // 可以在这里添加其他操作，例如发送Ajax请求
    // alert('Button ' + buttonId + ' has been disabled permanently.');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
// Cookie管理函数
function setCookie(name, value, days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "")  + expires + "; path=/";
}

function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) === ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

$(document).ready(function(){
   // 页面加载时检查并恢复按钮状态
   $(".registedButton").each(function() {
        var buttonId = $(this).attr('id');
        if(getCookie(buttonId)){
           $(this).prop('disabled', true);
        }
   });

   // 按钮点击时禁用并保存状态
   $('.registedButton').on('click', function(e) {
        var buttonId = $(this).attr('id');
        setCookie(buttonId, 'disabled', 30); // 保存状态，有效期30天
        // e.preventDefault(); // 根据需要决定是否阻止默认行为
        $(this).prop('disabled', true); // 禁用按钮
        // 这里可以添加其他业务逻辑，例如发送AJAX请求到服务器
   });
});
</script>