Disabilita il pulsante in jQuery

La mia pagina crea più pulsanti come id = 'rbutton_"+i+"'. Di seguito è il mio codice:

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

In Javascript

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

Ma non disabilita il mio pulsante quando faccio clic su di esso.

Utilizzare .propinvece (e ripulire la stringa del selettore):

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

HTML generato:

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

Ma l'approccio "best practice" consiste nell'utilizzare l'associazione di eventi JavaScript e thisinvece:

$('.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/

Prova questo codice:
HTML

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

funzione

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

Altra soluzione con jquery

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

DEMO

Altra soluzione con javascript puro

<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

Ci sono due cose qui e la risposta più votata è tecnicamente corretta secondo la domanda dei PO.

Riassumendo brevemente come:

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

Tuttavia, dovresti usare l'interfaccia utente di jQuery (so che l'OP non lo era, ma alcune persone che arrivano qui potrebbero esserlo), mentre questo disabiliterà l'evento di clic sui pulsanti, ma non farà apparire il pulsante disabilitato secondo lo stile dell'interfaccia utente.

Se si utilizza un pulsante in stile UI jQuery, è necessario abilitarlo / disabilitarlo tramite:

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

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

Questo è il modo più semplice secondo me:

// 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>

Prova questo

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

pulsante disabilita:

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

pulsante abilita:

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

Semplicemente funziona bene, in HTML:

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

Nel lato JQuery metti questa funzione per il pulsante disabilita:

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

Per il pulsante di abilitazione:

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

È tutto.

Ecco come lo fai con 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

Questo funziona per me:

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

Voglio disabilitare il pulsante in alcune condizioni, sto usando la prima soluzione ma non funzionerà per me. Ma quando ne uso la seconda ha funzionato. Di seguito sono emessi dalla console del browser.

1. $ ('# psl2 .btn-continue'). Prop ("disabilitato", vero)

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

2. $ ('# psl2 .btn-continue'). Attr ("disabilitato", "disabilitato")

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

Per i pulsanti dell'interfaccia utente di Jquery funziona:

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