即使在 javascript 和 thymeleaf 中刷新后也禁用多个按钮

Question

问题

我有多个连接到数据库的按钮来记录点击次数。它们在一列中，每次您单击一个按钮时，与该按钮关联的值都会增加一个。

数据库 table 如下所示：

id  party name  vote 
'1', 'Vulcan', '0'
'2', 'Romulan', '0'
'3', 'Klingon', '0'
'6', 'Rick & morty', '0'
'25', 'updated test', '0'

我想要的是：当您单击任何按钮时，它应该禁用所有按钮，但仍会增加已单击的按钮，同时还保存 cookie 会话，因此即使在刷新页面后您也无法单击任何按钮。所以点击后所有按钮应该disappear/disabled。

我试过什么？

我已经尝试了很多方法，例如 this，但都不起作用。按钮仍然有效，增量仍然发生。

这是我的 html 页面，上面显示了图片

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" 
    >
<head>
<meta charset="UTF-8">
<title>Show all parties</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round|Open+Sans">

 -->
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

</head>
<body>
    <div class="col-sm-8"><h2><b>Voting Page</b></h2></div>
        <div class="col-sm-4">
        
         <a href="/newparty" class="btn btn-info add-new">Add New Party</a>
    </div>
    
    <table border="1" cellpadding="10" class="table table-bordered table-striped">
        <thead>
            <tr>
                <th>Party Symbols</th>
                <th>Party Name</th>
                <th>Vote Here</th>
                <th>Action</th>
            </tr>
        </thead>
        
        <tbody>
            <tr th:each=" party : ${parties}">
                <td th:text="${party.id}">Party Symbols</td>
                <td th:text="${party.name}">Party Name</td>
                <td>
                    
                    <form th:action="@{/vote/{id}(id=${party.id})}" method="get">
                             
                             <button id="voted" >Vote Here</button>
                             
                    </form>
                </td>
                <td>
                    
                    <a th:href="@{/edit/{id}(id=${party.id})}"
                    
                    class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons">&#xE254;</i></a>
                     &nbsp;&nbsp;&nbsp;
                     <a th:href="@{/delete/{id}(id=${party.id})}"
                    
                    class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons">&#xE872;</i></a>
                    
                </td>
                
            </tr>
        </tbody>
        
    </table >
    <script type="text/javascript" 
        
    >
    function setCookie(name, value, days) {
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            var expires = "; expires=" + date.toGMTString();
        }
        else var expires = "";
        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;
    }

    $('#voted').click(function(){
        $(this).attr('disabled',true);
        setCookie('DisableBtn', true, null);
    });
    if(getCookie('DisableBtn'))
        $('#clic').attr('disabled',true);

    </script>
</body>
</html>

这里是点击此处投票时获取的控制器

@GetMapping("/vote/{id}")
    public String getVote(@PathVariable Long id) {
        partyService.vote(id);
        
        return "redirect:/";
    }

Answer 1

您应该能够完全使用服务器端 cookie 来完成此操作。例如，这对我有用

控制器：

@GetMapping("/vote")
public String main(Map<String, Object> model, @CookieValue(name = "voted", defaultValue = "false") String voted) {
  model.put("voted", Boolean.parseBoolean(voted));
  return "vote";
}

@GetMapping("/vote/{id}")
public String vote(HttpServletResponse response, @CookieValue(name = "voted", defaultValue = "false") String voted, @PathVariable Long id) {
  if (!Boolean.parseBoolean(voted)) {
    partyService.vote(id);
    Cookie cookie = new Cookie("voted", "true");
    response.addCookie(cookie);
  }

  return "redirect:/vote";
}

按钮：

<button id="voted" th:disabled="${voted}">Vote Here</button>

即使在 javascript 和 thymeleaf 中刷新后也禁用多个按钮

Disable multiple buttons even after refresh in javascript and thymeleaf

javascript

html

spring-boot

thymeleaf