481

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.

9
  • 6
    'rbutton_"+i+"' is not a valid ID. Feb 27, 2013 at 21:15
  • How can I specify the id. It's getting created in my javascript inside a for loop. Feb 27, 2013 at 21:17
  • 5
    You probably want disable(this) and function disable(elem) { $(elem).attr("disabled","disabled") }
    – JJJ
    Feb 27, 2013 at 21:18
  • 2
    jQuery can address elements by using their index number, so if you do it right, you may not even need IDs. You can pass disable(this) as a self-reference. Feb 27, 2013 at 21:18
  • 1
    Juhana: disable(this) didn't work. Feb 27, 2013 at 21:29

13 Answers 13

808

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() {
    $(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/

7
  • Here is a small fiddle I created. Please let me what I'm doing wrong. jsfiddle.net/2Nfu4/3 Feb 28, 2013 at 17:48
  • OK. It worked in No Wrap - in Head..But may I ask why? May be this is something similar, I'm not doing this in my actual code!! Feb 28, 2013 at 20:00
  • Just the way jsFiddle has it set up, it seems -- you can "inspect element" in your browser if you want to analyze exactly what's happening. Feb 28, 2013 at 20:13
  • 2
    This works well. Just make sure that if you are using ajax, you enable the button in the success and error cases. Not by the end of the ajax call. Because then it will immediately be enabled and you wont see the disable at all.
    – user890332
    Aug 17, 2014 at 17:11
  • With jQuery 1.10.2 it works in IE 11, but not in Chrome Version 39.0.2171.95 m. Suspiciously, the fiddle used for this answer does not offer jQuery 1.10.2
    – Alex
    Dec 28, 2014 at 2:40
60

This is the simplest way in my opinion:

// All buttons where id contains 'rbutton_'
const $buttons = $("button[id*='rbutton_']");

//Selected button onclick
$buttons.click(function() {
    $(this).prop('disabled', true); //disable clicked button
});

//Enable button onclick
$('#enable').click(() =>
    $buttons.prop('disabled', false) //enable all buttons
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="rbutton_200">click</button>
<button id="rbutton_201">click</button>
<button id="rbutton_202">click</button>
<button id="rbutton_203">click</button>
<button id="rbutton_204">click</button>
<button id="rbutton_205">click</button>
<button id="enable">enable</button>

1
  • 1
    Very nice sir.This totally worked.even with bootstrap buttons. Sep 10, 2019 at 9:01
42

disable button:

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

enable button:

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

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

2
  • Second .click() function works perfectly in your demo. But I've to use the separate method as mentioned in your first solution but it doesn't work. Can you please help!! Feb 28, 2013 at 17:40
  • Added a third solution with pure javascript @user2047817 Feb 28, 2013 at 20:50
31

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

0
28

Try this

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

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.

4

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
1
  • in some versions of jQuery, you must use .attr('disabled', true). I don't know which, but the version I'm having to use (minified and bundled as part of the app I'm working on) throws up with object does not support prop Nov 25, 2014 at 0:04
3

This works for me:

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

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>​
2

Call the function by class and "this" selector it's the best way than using the inline onClick function called -> onclick=disable(i); for multiple buttons

Note: use the same class name for all buttons that need a disabled function

Use jQuery CDN in the header or before your js script

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

Method 1

HTML

<button type='button' class="btnClick" id = 'rbutton_"+i+"'>Click me</button>

JS

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

Method 2

$('.btnClick').on('click', function(){
    disable(this.id)
})

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

both methods will work perfectly on multiple button/element click.

#if there is any issue or wrong in my code, please comment below.

1

For Jquery UI buttons this works :

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

Using arrow functions

$('#button-id').on('click', e => $(e.target).prop('disabled', true));

Not the answer you're looking for? Browse other questions tagged or ask your own question.