jQueryのボタンを無効にする

私のページは、複数のボタンをとして作成しますid = 'rbutton_"+i+"'。以下は私のコードです：

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

JavaScriptで

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

しかし、クリックしてもボタンが無効になるわけではありません。

.prop代わりに使用します（そしてセレクター文字列をクリーンアップします）：

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

生成されたHTML：

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

しかし、「ベストプラクティス」のアプローチは、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/

このコードを試してください：
HTML

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

関数

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

jqueryを使用したその他のソリューション

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

デモ

純粋な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>

デモ2

ここには2つの点があり、最高投票数の回答は、OPの質問に従って技術的に正しいです。

簡単に要約すると：

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

ただし、jQuery UIを使用している場合（OPはそうではなかったと思いますが、ここに到着する人もいる可能性があります）、これによりボタンのクリックイベントが無効になりますが、UIのスタイルに従ってボタンが無効に表示されません。

jQuery UIスタイルのボタンを使用している場合は、次の方法で有効/無効にする必要があります。

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

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

これは私の意見では最も簡単な方法です：

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

これを試して

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

無効化ボタン：

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

有効化ボタン：

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

単純に、HTMLで問題なく動作します。

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

JQuery側で、この関数を無効化ボタンに配置します。

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

有効化ボタンの場合：

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

それで全部です。

これが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

これは私にとってはうまくいきます：

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

ある条件でボタンを無効にしたいのですが、最初の解決策を使用していますが、うまくいきません。しかし、私が2つ目を使用するとうまくいきました。以下はブラウザコンソールからの出力です。

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

Jquery UIボタンの場合、これは機能します。

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