指定したボタンの全てにjavascriptでdisabledをつけたい

Question

<table border="1" cellspacing="0">
        <tr>
            <td colspan="4" id="result"></td>
        </tr>
        <tr>
            <td><button class="gray ac" onclick="reset();">AC</button></td>
            <td><button class="gray c" onclick="back();">C</button></td>
            <td><button class="gray tax" onclick="tax();">税込</button></td>
            <td><button class="orange" onclick="pushBtn(this);">/</button></td>
        </tr>
        <tr>
            <td><button onclick="pushBtn(this);">7</button></td>
            <td><button onclick="pushBtn(this);">8</button></td>
            <td><button onclick="pushBtn(this);">9</button></td>
            <td><button class="orange" onclick="pushBtn(this);">*</button></td>
        </tr>
        <tr>
            <td><button onclick="pushBtn(this);">4</button></td>
            <td><button onclick="pushBtn(this);">5</button></td>
            <td><button onclick="pushBtn(this);">6</button></td>
            <td><button class="orange" onclick="pushBtn(this);">-</button></td>
        </tr>
        <tr>
            <td><button onclick="pushBtn(this);">1</button></td>
            <td><button onclick="pushBtn(this);">2</button></td>
            <td><button onclick="pushBtn(this);">3</button></td>
            <td><button class="orange" onclick="pushBtn(this);">+</button></td>
        </tr>
        <tr>
            <td colspan="3"><button onclick="pushBtn(this);">0</button></td>
            <td><button class="orange" onclick="calc();">=</button></td>
        </tr>
    </table>

    <script>
    let button = document.querySelector('.orange');
    button.disabled = "true";
    </script>

電卓機能を作っていてclass="orange"の全てにdisabeledをきかせたい

上記のようにqueryselectorで取得すると最初のclass="orange"の/ のところだけdisabledがきいてボタンが押せないようになります。
そこでqueryselectorAllに変えて全てのclass="orange"にdisabledをきかせようとすると上手くいきません。

どうすればいいのか教えて頂きたいです。

Comments

[kei344]

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

Answer 1

querySelectorAllで返されるのはNodeListで、配列のように扱います。
なので、そのまま

button.disabled = "true";

とは出来ません。なので、実際はループによってNodeList内の各要素にdisabledを設定していく必要があります。

https://itsakura.com/js-queryselectorall

Comments

[koni01]

ありがとうございます。

Answer 2

querySelectorAll()を使用する際は、for文などが必要です。
以下のような書き方になると思います。

let elm = document.body.querySelectorAll('.orange');
for(let i = 0; i < elm.length; i++) {
  console.log(elm[i]);
  elm[i].disabled = 'true';
}

参考URL:
https://developer.mozilla.org/ja/docs/Web/API/Element/querySelectorAll

Comments

[koni01]

ありがとうございます。
上手く出来ました。