jQuery实现同class复选框选中数量≥2时控制按钮状态的咨询

你把选中项class存入数组的核心思路没问题，之前实现跑不通主要是两个常见问题：

• 每次触发点击事件时没有重置class收集数组，上次点击残留的旧class值会干扰当前判断结果
• 选择器存在引号嵌套的语法错误，导致jQuery无法正确匹配对应元素

优化后的可运行代码 #

$('input[type="checkbox"]').click(function(){
  // 缓存实时选中的复选框集合、按钮对象，减少重复DOM查询
  const $checkedBoxes = $('input[type="checkbox"]:checked');
  const $btn = $('#btn');

  // 选中数不足2个时直接走禁用逻辑，减少无效计算
  if ($checkedBoxes.length < 2) {
    $btn.html("too bad").prop('disabled', true);
    return;
  }

  // 收集所有选中项的class，用Set去重校验同组性
  const classSet = new Set(
    $checkedBoxes.map(function() {
      return $(this).attr('class');
    }).get()
  );

  // 去重后集合长度为1，说明所有选中项属于同一个class组
  if (classSet.size === 1) {
    $btn.html("click me").prop('disabled', false);
  } else {
    $btn.html("too bad").prop('disabled', true);
  }
});

实现说明 #

• 整个逻辑完全基于实时的元素状态计算，没有全局变量残留的污染问题
• 用Set做去重校验，比手写循环判断数组元素一致性的代码更简洁，也不容易出现边界判断错误
• 不需要修改原有input元素的结构、name、value属性，完全符合现有约束条件

低版本兼容写法 #

如果项目环境不支持ES6的Set语法，可以替换为数组方法做一致性判断：

// 替换Set校验的部分
const checkClass = [];
$checkedBoxes.each(function() {
  checkClass.push($(this).attr('class'));
});
// 校验数组内所有元素是否和第一个元素完全一致
const isSameClass = checkClass.every(item => item === checkClass[0]);

if (isSameClass) {
  $btn.html("click me").prop('disabled', false);
} else {
  $btn.html("too bad").prop('disabled', true);
}

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