複数のボタンをBool値で非活性(disabled)にする | 超初心者のJavascriptの勉強

複数のボタンを一度に非活性にする方法を練習がてら模索しました。

HTML

<button id=”eventButton1″>ボタン1></button>
<button id=”eventButton2″>ボタン2></button>
<button id=”eventButton3″>ボタン3></button>
<button id=”setButton” onclick=’setDisabledButton()’>実行</button>
<button id=”unButton” onclick=’unDisabledButton()>解除</button>

サンプルコード

//引数が true = 非活性, false = 活性
//実行ボタンがクリックされたらDisabled
function setDisabledButton(){
//前方一致でeventButtonから始まるidを取得
let setbuttonArray = $(‘[id^=”eventButton”]’);
//取得したidを持つタグにdisabledを設置
for(i=0; i< setbuttonArray.length; i++){
$(‘#’ + setbuttonArray[i].id).prop(“disabled”, true);
}
}
//解除ボタンがクリックされたらDisabled解除
function unDisabledButton(){
//前方一致でeventButtonから始まるidを取得
let unbuttonArray = $(‘[id^=”eventButton”]’);
//取得したidを持つタグからdisabledを除去
for(i=0; i< unbuttonArray.length; i++){
$(‘#’ + unbuttonArray[i].id).prop(“disabled”, false);
}
}

Demo

ボタン1 ボタン2 ボタン3 実行 解除

実行ボタンをクリックするとボタン123がDisabledになりボタンが押せなくなります。