如何实现动态生成按钮的永久禁用与状态持久化

<div class="panel-group" id="posts">  
    <?php  
    // 假设 $query 是从数据库获取数据的PDOStatement对象
    while($row = $query->fetch(PDO::FETCH_ASSOC))
    {  
    ?>  
      <!-- 为每个按钮生成唯一的ID，例如结合数据库中的Acronym字段 -->
      <button id='registedButton_<?php echo htmlspecialchars($row["Acronym"]); ?>' 
              type='button' 
              class="registedButton" 
              data-id="<?php echo htmlspecialchars($row["Acronym"]); ?>">
          Applied
      </button> 
    <?php 
    } // 结束while循环
    ?>
</div>

// 设置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' 类名的按钮
    $(".registedButton").each(function() {
        var buttonId = $(this).attr('id'); // 获取当前按钮的唯一ID
        // 检查是否存在与该按钮ID对应的Cookie
        if(getCookie(buttonId)){
           $(this).prop('disabled', true); // 如果Cookie存在，则禁用按钮
        }
    });
});

$('.registedButton').on('click', function(e) {
    var buttonId = $(this).attr('id'); // 获取被点击按钮的唯一ID
    // 设置一个Cookie，其名称为按钮ID，值为'setVal'（任意非空值即可），有效期为30天
    setCookie(buttonId, 'setVal', 30); 

    // 阻止按钮的默认行为（如果按钮是表单提交按钮，可能需要）
    e.preventDefault(); 

    $(this).prop('disabled', true); // 禁用被点击的按钮

    // 可以在这里添加Ajax请求或其他业务逻辑
    // 例如：$.post('/api/register', { buttonId: buttonId }, function(response) { /* 处理响应 */ });
});

<div class="panel-group" id="posts">  
    <?php  
    // 假设 $query 是从数据库获取数据的PDOStatement对象
    while($row = $query->fetch(PDO::FETCH_ASSOC))
    {  
    ?>  
      <button id='registedButton_<?php echo htmlspecialchars($row["Acronym"]); ?>' 
              type='button' 
              class="registedButton" 
              data-id="<?php echo htmlspecialchars($row["Acronym"]); ?>">
          Applied
      </button> 
    <?php 
    } 
    ?>
</div>

<!-- 引入 jQuery 库，建议放在 body 结束标签之前 -->
<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=/";
}

// 获取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');
        if(getCookie(buttonId)){
           $(this).prop('disabled', true);
        }
    });

    // 按钮点击事件处理
    $('.registedButton').on('click', function(e) {
        var buttonId = $(this).attr('id');
        // 设置Cookie，有效期30天
        setCookie(buttonId, 'setVal', 30); 

        e.preventDefault(); // 阻止默认行为
        $(this).prop('disabled', true); // 禁用按钮

        // 在此处添加您的Ajax请求或其他业务逻辑
        // 例如：
        // $.ajax({
        //     url: '/your-server-endpoint',
        //     type: 'POST',
        //     data: { action: 'register', buttonId: buttonId },
        //     success: function(response) {
        //         console.log('Server response:', response);
        //     },
        //     error: function(xhr, status, error) {
        //         console.error('Ajax error:', error);
        //         // 如果服务器操作失败，可能需要重新启用按钮或给出提示
        //         // $(this).prop('disabled', false); 
        //         // setCookie(buttonId, '', -1); // 删除Cookie
        //     }
        // });
    });
});
</script>