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

<div class="panel-group" id="posts">  
    <?php  
    // 假设 $query 是一个PDO查询结果集
    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>

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

<script>
/**
 * 设置Cookie
 * @param {string} name Cookie的名称
 * @param {string} value Cookie的值
 * @param {number} days 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
 * @param {string} name Cookie的名称
 * @returns {string|null} Cookie的值，如果不存在则返回null
 */
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(){
   // 1. 页面加载时检查并恢复按钮状态
   $(".registedButton").each(function() {
        var buttonId = $(this).attr('id'); // 获取按钮的唯一ID
        if(getCookie(buttonId)){ // 检查是否存在对应ID的Cookie
           $(this).prop('disabled', true); // 如果存在，则禁用按钮
           $(this).text('Disabled'); // 可以修改按钮文本以提供反馈
           $(this).addClass('disabled-state'); // 添加一个类来改变样式
        }
   });

   // 2. 按钮点击时禁用并存储状态
   $('.registedButton').on('click', function(e) {
        e.preventDefault(); // 阻止默认的表单提交行为（如果按钮在表单内）

        var buttonId = $(this).attr('id'); // 获取被点击按钮的唯一ID

        // 设置Cookie，将按钮ID作为Cookie名称，任意值（如'disabled'）作为值，并设置有效期
        setCookie(buttonId, 'disabled', 365); // 例如，设置Cookie一年有效

        $(this).prop('disabled', true); // 禁用按钮
        $(this).text('Disabled'); // 修改按钮文本
        $(this).addClass('disabled-state'); // 添加一个类来改变样式

        // 这里可以添加其他业务逻辑，例如通过AJAX提交数据到服务器
        // console.log("Button " + buttonId + " has been disabled permanently.");
   });
});
</script>

<style>
.registedButton {
    /* 默认按钮样式 */
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 10px;
}

.registedButton:hover:not(:disabled) {
    background-color: #0056b3;
}

.registedButton:disabled,
.registedButton.disabled-state {
    background-color: #cccccc; /* 禁用状态的背景色 */
    color: #666666; /* 禁用状态的文字颜色 */
    cursor: not-allowed; /* 禁用状态的鼠标样式 */
    border: 1px solid #999999;
}
</style>