jquery - jQueryでボタンを無効にする

Question

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

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

JavaScriptで

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

しかし、ボタンをクリックしてもボタンが無効になりません。

Answer 1

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

Answer 2

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

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

Answer 3

このコードを試してください:
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