jQuery中如何按ID检查输入框存在且未禁用后执行循环？

以下提供两种不同业务场景的实现代码，可按需选择：

场景1：需校验5个输入框全部存在且未禁用，才执行遍历逻辑 #

适合要求所有指定输入框都正常可用才走后续业务的场景，方便统一做兜底处理：

// 统一维护输入框ID列表，后续修改ID仅需调整此处
const targetInputIds = [
  '#cf_2693809',
  '#cf_2693816',
  '#cf_2693823',
  '#cf_2693830',
  '#cf_2693837'
]

// 全量校验所有输入框符合要求
const isAllInputValid = targetInputIds.every(id => {
  const $target = $(id)
  // length>0 校验元素存在，!is(':disabled')校验未被禁用
  return $target.length > 0 && !$target.is(':disabled')
})

// 所有输入框校验通过后再执行遍历
if (isAllInputValid) {
  $(targetInputIds.join(',')).each(function () {
    // 此处写入原有业务逻辑
    console.log($(this).val())
  })
} else {
  // 可自行补充不符合要求的兜底逻辑
  alert('部分必填输入框不存在或已被禁用')
}

场景2：仅遍历符合条件的输入框，无需所有输入框都可用 #

适合仅需要处理可用的输入框、不强制要求所有输入框都存在的场景，写法更简洁：

// 选择器会自动过滤不存在的元素，:not(:disabled)过滤禁用元素
$("#cf_2693809:not(:disabled), #cf_2693816:not(:disabled), #cf_2693823:not(:disabled), #cf_2693830:not(:disabled),#cf_2693837:not(:disabled)").each(function(){
  // 额外加一层显式校验，避免后续选择器规则被修改后逻辑异常
  if ($(this).length === 0 || $(this).is(':disabled')) return
  // 此处写入原有业务逻辑
  console.log($(this).val())
})

注：jQuery选择器本身返回的是匹配到的元素集合，天然不会包含不存在的元素，原写法已经自带存在性过滤，额外加显式校验只是为了提升代码健壮性，降低后续维护的出错概率。

内容的提问来源于stack exchange，提问作者Karim Ali