Javascript

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

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

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

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です