在 JQuery 中单击后禁用按钮

Posted 2023-02-22

【中文标题】在 JQuery 中单击后禁用按钮

【英文标题】：Disable button after click in JQuery

【发布时间】：2014-06-29 03:49:24

【问题描述】：

我的按钮使用 AJAX 向数据库添加信息并更改按钮文本。但是，我希望在单击后禁用该按钮（否则该人可以向数据库中的信息发送垃圾邮件）。我该怎么做？

html

<button class="btn btn-lg btn-primary" id='roommate_but' onclick='load(<?php echo $user_id;?>)'><span class="glyphicon glyphicon-plus"></span> Add Person</button>

javascript/AJAX/JQuery

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

function load(recieving_id)                                    
    if (window.XMLHttpRequest)
        xmlhttp = new XMLHttpRequest();
     else
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
    

    xmlhttp.onreadystatechange = function() 
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200)  
            document.getElementById("roommate_but").innerHTML =  xmlhttp.responseText;


        

    

xmlhttp.open('GET','include.inc.php?i=' + recieving_id, true);

xmlhttp.send();

【问题讨论】：

你真的在页面上包含了 jQuery 吗？我问是因为 - 尽管你用jQuery 标记了这个问题 - 你的代码中没有使用 jQuery。因此，根据您是否可以使用 jQuery，答案可能会有很大差异。

是的，我正在使用 JQuery。我编辑了我的原始帖子以显示 JQuery 的链接。有什么建议可以一键禁用按钮吗？

如果您已经在使用 jQuery，请不要使用纯 XHR。两者混合起来非常难看。

【参考方案1】：

*更新

jQuery 版本如下：

function load(recieving_id)
    $('#roommate_but').prop('disabled', true);
    $.get('include.inc.php?i=' + recieving_id, function(data) 
        $("#roommate_but").html(data);
    );

【讨论】：

当我在加载函数中添加它时，按钮仍然是可点击的，它停止了向数据库添加内容和更改按钮文本的功能。该代码的任何特定位置以确保它与其他功能的按钮一起使用？

ajax成功后删除disabled，答案更新

我用您的加载函数替换了整个加载函数（因此将 AJAX 替换为 Jquery），单击后它仍然没有禁用按钮（仍然可单击）。但是，它仍然可以做与 AJAX 相同的事情，转到另一个页面，向 db 添加一些内容，并更改按钮文本。如果有帮助，我正在使用引导按钮。有什么我还能做的吗？

如果你想一键禁用按钮然后删除$('#roommate_but').prop('disabled', false);，回答更新

如果你让这个答案对问题的标题更通用，你会得到更多的赞许：“点击 JQuery 后禁用按钮”在谷歌中显示为最高结果。在他的答案中包含有关直接禁用的信息，例如/。

【参考方案2】：

您可以在 jquery 中通过将属性 disabled 设置为 'disabled' 来做到这一点。

$(this).prop('disabled', true);

我做了一个简单的例子http://jsfiddle.net/4gnXL/2/

【讨论】：

您应该知道何时使用attr 以及何时使用prop。这应该使用prop 来完成。你可以阅读更多关于它的信息here。

是的，我认为亚当是对的。当我尝试这段代码时： $('roommate_but').click(function() $(this).attr('disabled','disabled'); ); ，该按钮仍未被禁用。所以我只需要将 attr 更改为 prop 对吗？我可以在任何特定的地方放置按钮以使其工作吗？如果有帮助，我实际上正在使用引导按钮

-1 用于使用 attr 即使.prop() 已经存在多年了。但是，两者都应该工作。

注意@PeterSmith 将会更新。 @user337712 $('roommate_but') 应该是 $('#roommate_but')

以及如何禁用按钮并保留其样式，因为 attr "disabled" 通常具有不透明 css 规则。

【参考方案3】：

也可以考虑.attr()

$("#roommate_but").attr("disabled", true); 为我工作。