在jQuery中禁用按钮

本文翻译自：Disable button in jQuery

My page creates multiple buttons as id = 'rbutton_"+i+"' . 我的页面创建了多个按钮，如id = 'rbutton_"+i+"' 。 Below is my code: 以下是我的代码：

<button type='button' id = 'rbutton_"+i+"' onclick=disable(i);>Click me</button>

In Javascript 在Javascript中

function disable(i){
    $("#rbutton'+i+'").attr("disabled","disabled");
}

But it doesn't disable my button when I click on it. 但是当我点击它时它不会禁用我的按钮。

---

#1楼

参考：https://stackoom.com/question/11S3i/在jQuery中禁用按钮

---

#2楼

Use .prop instead (and clean up your selector string): 改为使用.prop （并清理你的选择器字符串）：

function disable(i){
    $("#rbutton_"+i).prop("disabled",true);
}

generated HTML: 生成的HTML：

<button id="rbutton_1" onclick="disable(1)">Click me</button>
<!-- wrap your onclick in quotes -->

---

But the "best practices" approach is to use JavaScript event binding and this instead: 但是，“最佳实践”的方法是使用JavaScript事件绑定和this相反：

 $('.rbutton').on('click',function() { $(this).prop("disabled",true); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <button class="rbutton">Click me</button> 

http://jsfiddle.net/mblase75/2Nfu4/ http://jsfiddle.net/mblase75/2Nfu4/

---

#3楼

Try this code: 试试这段代码：
HTML HTML

<button type='button' id = 'rbutton_'+i onclick="disable(i)">Click me</button>

function 功能

function disable(i){
    $("#rbutton_"+i).attr("disabled","disabled");
}

---

Other solution with jquery 使用jquery的其他解决方案

$('button').click(function(){ 
    $(this).attr("disabled","disabled");
});

DEMO DEMO

---

Other solution with pure javascript 其他解决方案与纯JavaScript

<button type='button' id = 'rbutton_1' onclick="disable(1)">Click me</button>

<script>
function disable(i){
 document.getElementById("rbutton_"+i).setAttribute("disabled","disabled");
}
</script>

DEMO2 DEMO2

---

#4楼

Here's how you do it with ajax. 这是你用ajax做的方法。

$("#updatebtn").click(function () {
    $("#updatebtn").prop("disabled", true);
    urlToHandler = 'update.ashx';
            jsonData = data;
            $.ajax({
                url: urlToHandler,
                data: jsonData,
                dataType: 'json',
                type: 'POST',
                contentType: 'application/json',
                success: function (data) {
                    $("#lbl").html(data.response);
                    $("#updatebtn").prop("disabled", false);
                    //setAutocompleteData(data.response);
                },
                error: function (data, status, jqXHR) {
                    alert('There was an error.');
                    $("#updatebtn").prop("disabled", false);
                }
            }); // end $.ajax

---

#5楼

Simply it's work fine, in HTML: 只需它在HTML中工作正常：

<button type="button" id="btn_CommitAll"class="btn_CommitAll">save</button>

In JQuery side put this function for disable button: 在JQuery方面，将此功能用于禁用按钮：

function disableButton() {
    $('.btn_CommitAll').prop("disabled", true);
}

For enable button: 对于启用按钮：

function enableButton() {
    $('.btn_CommitAll').prop("disabled", false);
}

That's all. 就这样。

---

#6楼

There are two things here, and the highest voted answer is technically correct as per the OPs question. 这里有两件事，根据OP问题，最高投票答案在技术上是正确的。

Briefly summarized as: 简要总结为：

$("some sort of selector").prop("disabled", true | false);

However should you be using jQuery UI (I know the OP wasn't but some people arriving here might be) then while this will disable the buttons click event it wont make the button appear disabled as per the UI styling. 但是，你应该使用jQuery UI（我知道OP不是，但有些人到达这里可能）然后这将禁用按钮点击事件，它不会使按钮显示为按UI样式禁用。

If you are using a jQuery UI styled button then it should be enabled / disabled via: 如果您使用的是jQuery UI样式按钮，则应通过以下方式启用/禁用它：

$("some sort of selector").button("enable" | "disable");

http://api.jqueryui.com/button/#method-disable http://api.jqueryui.com/button/#method-disable