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.
Advertisement
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">