如何统计表单中所有禁用的type="number"类型输入框数量？

要实现仅统计表单中type="number"且处于禁用状态的输入框数量，有两种简洁的实现方式：

方法一：使用CSS选择器直接匹配（推荐） #

利用querySelectorAll结合精准的CSS选择器，一步到位获取目标元素并统计数量：

// 统计所有表单内符合条件的输入框
const disabledNumberInputCount = document.querySelectorAll('form input[type="number"]:disabled').length;

选择器说明：

• form input：限定只匹配表单内的input元素
• [type="number"]：筛选type属性为number的输入框
• :disabled：进一步筛选处于禁用状态的元素

如果需要针对特定表单统计（比如id为userForm的表单），可以缩小范围：

const targetForm = document.getElementById('userForm');
const disabledNumberInputCount = targetForm.querySelectorAll('input[type="number"]:disabled').length;

方法二：基于原有代码扩展遍历过滤 #

如果想保留getElementsByTagName的写法，可以通过遍历过滤符合条件的元素：

let countIN = 0;
const allInputs = document.getElementsByTagName('input');

for (const input of allInputs) {
  // 同时满足三个条件：属于表单、type为number、已禁用
  if (input.form && input.type === 'number' && input.disabled) {
    countIN++;
  }
}

这里input.form属性用于判断当前input是否隶属于某个表单，避免统计页面上不属于表单的输入框。

内容的提问来源于stack exchange，提问作者Paul Davis