Deaktivieren Sie die Schaltfläche in jQuery

Meine Seite erstellt mehrere Schaltflächen als id = 'rbutton_"+i+"'. Unten ist mein Code:

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

In Javascript

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

Meine Schaltfläche wird jedoch nicht deaktiviert, wenn ich darauf klicke.

Verwenden Sie .propstattdessen (und bereinigen Sie Ihre Auswahlzeichenfolge):

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

generiertes HTML:

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

Der "Best Practices" -Ansatz besteht jedoch darin, die JavaScript-Ereignisbindung zu verwenden und thisstattdessen:

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

Versuchen Sie diesen Code:
HTML

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

Funktion

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

Andere Lösung mit jquery

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

DEMO

Andere Lösung mit reinem 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

Hier gibt es zwei Dinge, und die Antwort mit der höchsten Stimme ist gemäß der Frage des OP technisch korrekt.

Kurz zusammengefasst als:

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

Wenn Sie jedoch die jQuery-Benutzeroberfläche verwenden (ich weiß, dass das OP nicht vorhanden war, aber möglicherweise einige Leute hier ankommen), wird die Schaltfläche zwar deaktiviert, aber die Schaltfläche wird gemäß dem UI-Stil nicht deaktiviert angezeigt.

Wenn Sie eine Schaltfläche im Stil einer jQuery-Benutzeroberfläche verwenden, sollte diese aktiviert / deaktiviert werden über:

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

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

Dies ist meiner Meinung nach der einfachste Weg:

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

Versuche dies

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

Schaltfläche zum Deaktivieren:

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

Aktivierungsschaltfläche:

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

In HTML funktioniert es einfach einwandfrei:

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

Setzen Sie auf der JQuery-Seite diese Funktion für die Schaltfläche zum Deaktivieren:

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

Für die Schaltfläche zum Aktivieren:

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

Das ist alles.

So geht's mit 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

Das funktioniert bei mir:

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

Ich möchte die Schaltfläche unter bestimmten Bedingungen deaktivieren. Ich verwende die erste Lösung, aber sie funktioniert bei mir nicht. Aber wenn ich 2. benutze, hat es funktioniert. Unten sind Ausgaben von der Browserkonsole.

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

Für Jquery UI-Schaltflächen funktioniert dies:

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