Get the count of only disabled type=”number” input boxes

How can I expand this to count all input boxes in a form that is type="number" but is currently disabled?

let countIN = document.getElementsByTagName('input').length;

I can count all the input boxes (which included checkboxes) but I want to only count the specific disabled boxes only.

Answer

I would use querySelectorAll (which deals with CSS selectors naturally) with the selector [type="number"]:disabled. For example, as you can see in the example, it’s the same selector that you would use in a CSS file to change the background colour for those specific elements.

Note: if you wanted to be more specific you could prefix input to the selector (input[type="number"]:disabled), but it’s rare – in my experience – to find an element with a number type that isn’t an input so you can generally just leave that part out.

const selector = '[type="number"]:disabled';

const disabled = document.querySelectorAll(selector);

console.log(`Disabled number inputs: ${disabled.length}`);

[type="number"]:disabled { background-color: salmon; }

<input type="number" value="1">
<input type="number" value="2" disabled>
<input type="number" value="3">
<input type="number" value="4" disabled>
<input type="number" value="5">