如何在复选框change事件中正确更新关联元素的disabled属性

你现在的代码跑不通、禁用状态切不回来，根本不是prop/attr方法本身的问题，全是代码里的笔误和选择器逻辑错误，导致执行流程直接中断，根本没走到恢复状态的那一步：

• 事件委托的参数写法错误：jQuery的on方法第二个参数如果是选择器，必须是带引号的字符串。你代码里写的li.active input没加引号，JS会直接把它解析成对全局li变量的属性访问，一跑就抛语法错，整个事件绑定逻辑根本不生效。
• 类操作方法名拼错了：jQuery自带的类操作方法是addClass()和removeClass()，你写的是addClasss()、removeClasss()（三个s），调用不存在的方法会直接抛类型错误，代码执行到这行就直接断了，后面的设置disabled状态的代码根本跑不到。
• 条件语句括号不闭合：else if后面的判断条件!($(this).prop('checked'))少了一个右括号，同样会触发语法错误。
• 找目标元素的选择器逻辑错了：你写的$(this).children('input')，这里的$(this)本身就是触发change事件的复选框input。HTML里input是自闭合的空标签，内部根本不会嵌套子元素，这个选择器永远找不到任何关联的复选框。就算你的关联复选框是嵌套在当前li的多层结构里，用children()也只能找直接子元素，根本覆盖不到深层的节点，必须用find()遍历所有后代元素。

$('#id_of_ul_that_holds_li_s').on('change', 'li.active input[type="checkbox"]', function() {
  // 定位当前复选框所属的li节点，避免直接取parent()受DOM结构影响
  const $targetLi = $(this).closest('li');
  // 拿到li内部除当前触发元素外的所有关联复选框
  const $relatedCbs = $targetLi.find('input[type="checkbox"]').not(this);

  if ($(this).prop('checked')) {
    $targetLi.addClass('checked');
    $relatedCbs.prop('disabled', true);
  } else {
    $targetLi.removeClass('checked');
    $relatedCbs.prop('disabled', false);
  }
});

• 所有选择器参数都用字符串包裹，从根源上避免语法错误
• 用closest('li')代替直接调用parent()，就算后续DOM结构调整增加层级，也能准确匹配到对应的li节点
• 用find()遍历li内所有后代的复选框，不会漏掉深层嵌套的关联元素
• 针对disabled这类DOM固有布尔属性，统一用prop()设置布尔值就可以正常切换，完全不需要调用removeAttr/removeProp这类冗余方法，之前操作无效的核心原因是代码提前中断，根本没执行到设置状态的步骤
• 去掉冗余的else if判断，复选框的checked状态只有开/关两种，用基础if/else分支就可以覆盖所有场景

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