按钮点击后禁用问题

Question

按钮点击后禁用问题

5

我在登录页面有一个提交按钮，我想在点击一次后禁用提交按钮。使用this.disabled = true;语句可以正常工作，并且在禁用按钮后它会转到下一页。但问题在于，当我点击“返回”按钮时，提交按钮仍然被禁用，因为页面没有从服务器重新加载，而是从本地缓存加载。我想在每次回到登录页面时都启用该按钮。我可以清除缓存，但这会导致从服务器重新加载页面，从而使项目变慢。如何才能最好地解决这个问题呢？

<script>
$(document).ready(function(){
    $(document).on('click','button',function(){
        this.disabled = true
        window.location="https://www.google.co.in/"
    })
})
</script>
<body>
<button type="submit" id="button">Click Me!</button> 
</body>

- Kousik

为什么如果它进入另一个页面，你需要禁用它？ - Sergio

@Sergio -- 可能是为了避免多次提交表单或类似的情况。 - sbeliv01

@sbeliv01，是可以的。只是好奇更好地理解OP的想法。 - Sergio

@Sergio，这里我的示例很简单，所以你可以感觉到它不是必需的，但对于表单提交或ajax POST，它是必需的，否则它会发送多个请求。 - Kousik

你是从ajax调用中获取url的吗？你不能在ajax的响应函数中启用它吗？ - Sergio

请提供一些代码，以便我能够了解它的工作原理。 - Kousik

2个回答

2

我在HTML的body标签中将按钮的初始禁用属性设置为disabled，以证明代码确实可以再次启用它（因此您可以在body中删除该属性）。希望这可以帮助：

<script>
$(document).ready(function () {
$("#button").removeAttr('disabled');
$("#button").click(function(){
        $(this).attr('disabled','disabled');
        window.location="https://www.google.co.in/"
    });
});
</script>
<body>
<button type="submit" id="button" disabled="disabled">Click Me!</button> 
</body>

- SteveKB

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- retrohacker · Accepted Answer

你需要另一个事件，在页面加载时确保按钮处于启用状态。就像这样：

<script>
$(document).ready(function(){
    $("#button").disabled = false;
    $(document).on('click','button',function(){
        this.disabled = true
        window.location="https://www.google.co.in/"
    })
})
</script>
<body>
<button type="submit" id="button">Click Me!</button> 
</body>

我没有尝试运行这个代码，所以不确定语法是否100%正确，但它应该能够给你一个正确的想法。