[jquery] Disable button in jQuery

My page creates multiple buttons as id = 'rbutton_"+i+"'. Below is my code:

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

In Javascript

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

But it doesn't disable my button when I click on it.

disable button:

$('#button_id').attr('disabled','disabled');

enable button:

$('#button_id').removeAttr('disabled');

Here's how you do it with 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

This works for me:

<script type="text/javascript">
function change(){
    document.getElementById("submit").disabled = false;
}
</script>

This is the simplest way in my opinion:

// All buttons where id contains 'rbutton_'_x000D_
const $buttons = $("button[id*='rbutton_']");_x000D_
_x000D_
//Selected button onclick_x000D_
$buttons.click(function() {_x000D_
    $(this).prop('disabled', true); //disable clicked button_x000D_
});_x000D_
_x000D_
//Enable button onclick_x000D_
$('#enable').click(() =>_x000D_
    $buttons.prop('disabled', false) //enable all buttons_x000D_
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<button id="rbutton_200">click</button>_x000D_
<button id="rbutton_201">click</button>_x000D_
<button id="rbutton_202">click</button>_x000D_
<button id="rbutton_203">click</button>_x000D_
<button id="rbutton_204">click</button>_x000D_
<button id="rbutton_205">click</button>_x000D_
<button id="enable">enable</button>

For Jquery UI buttons this works :

$("#buttonId").button( "option", "disabled", true | false );

Try this

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

I want to disable button on some condition, i am using 1st solution but it won't work for me. But when I use 2nd one it worked.Below are outputs from browser console.

1. $('#psl2 .btn-continue').prop("disabled", true)

<a class=?"btn btn-yellow btn-continue" href=?"#">?Next?</a>?

2. $('#psl2 .btn-continue').attr("disabled","disabled")

<a class=?"btn btn-yellow btn-continue" href=?"#" disabled=?"disabled">?Next?</a>?

There are two things here, and the highest voted answer is technically correct as per the OPs question.

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.

If you are using a jQuery UI styled button then it should be enabled / disabled via:

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

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

Use .prop instead (and clean up your selector string):

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

generated 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:

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

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

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

Simply it's work fine, in HTML:

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

In JQuery side put this function for disable button:

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

For enable button:

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

That's all.

Try this code:
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

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

DEMO

Other solution with pure 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