JavaScript限制复选框最多选中5个功能失效问题排查

API 探路者

2026-7-10

复选框无法取消选中的原因及解决方法

核心原因：`this`指向错误

你定义的函数参数是_this，但函数内部却使用了this。在通过onchange="change(this)"调用函数时，普通函数内部的this默认指向全局对象（浏览器环境下为window），而非你传入的复选框元素。所以this.checked = false和$(this).prop('checked', false)都是在操作window对象，自然无法修改目标复选框的选中状态。

修正后的代码

原生JavaScript版本

function change(_this) {
  // 先判断当前复选框是否处于选中状态，再统计总选中数
  if (_this.checked && $('input[type=checkbox]:checked').length > 5) {
    alert("最多只能选5个");
    _this.checked = false;
  }
}

jQuery版本

function change(_this) {
  if ($(_this).is(':checked') && $('input[type=checkbox]:checked').length > 5) {
    alert("最多只能选5个");
    $(_this).prop('checked', false);
  }
}