如何用jQuery实现选中2个复选框后禁用剩余复选框？

嘿，我看了你的代码和需求，目前你已经实现了提交按钮的状态控制，但还没处理「选中2个后禁用剩余复选框」的核心逻辑。咱们来调整一下代码，完美实现这个功能：

修改后的完整JavaScript代码 #

$('.btn').click(function() {
  $('.modal')
    .prop('class', 'modal fade') // 恢复默认类
    .addClass($(this).data('direction'));
  $('.modal').modal('show');
});

$("#answers-type1 li").click(function() {
  $(this).toggleClass("place");
});

$('ul.myclass li').click(function() {
  const $li = $(this);
  const $cb = $li.find(":checkbox");
  const isChecked = $cb.prop("checked");
  
  // 切换复选框状态
  $cb.prop("checked", !isChecked);
  
  // 获取当前选中的数量
  const checkedCount = $(".number:checked").length;
  
  // 控制提交按钮状态
  $('#btn').prop('disabled', checkedCount !== 2);
  
  // 处理剩余选项的禁用/启用逻辑
  if (checkedCount === 2) {
    // 选中数量达到2，禁用所有未选中的li和对应的复选框
    $('ul.myclass li').not('.place').each(function() {
      $(this).addClass('disabled').find('.number').prop('disabled', true);
    });
  } else {
    // 选中数量不足2，恢复所有li和复选框的可点击状态
    $('ul.myclass li').removeClass('disabled').find('.number').prop('disabled', false);
  }
});

补充CSS样式（用于标记禁用状态） #

.myclass li span {
  margin-left: 5px;
}
.place {
  background-color: #27B249 !important;
}
/* 新增禁用状态样式 */
.myclass li.disabled {
  background-color: #ccc !important;
  cursor: not-allowed;
  opacity: 0.7;
}

关键逻辑说明 #

• 切换复选框状态：点击li时，先切换对应复选框的选中状态，再计算当前选中总数
• 按钮状态控制：只有选中数量正好是2时，提交按钮才启用，保持你原有的逻辑
• 禁用剩余选项：当选中数量达到2时，给所有未选中的li添加disabled类（视觉上标记禁用），同时禁用对应的复选框；当取消选中导致数量不足2时，立即恢复所有选项的可交互状态
• 允许取消已选中项：即使已经选中2个，点击已选中的li依然可以取消，这时候会自动恢复其他选项的可用状态

这样修改后，就能实现你想要的「最多选中2个复选框，选中后剩余选项自动禁用」的功能啦。

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