Django实现按父类关联规则启用/禁用复选框功能

你现有逻辑只能全量禁用的核心原因是前端没有拿到「客户-业务挑战」的关联关系映射，没有判断单个业务挑战是否属于选中客户关联范围的依据，按以下三步修改即可实现精准控制：

• 后端补充关联映射输出
  在渲染筛选页的视图中，提前计算每个客户对应的关联业务挑战ID集合，序列化后传给模板，不需要前端额外发请求拉取：

  # views.py
  def product_filter_view(request):
      # 保留原有查询逻辑
      client_list = Client.objects.all()
      bc_list = BusinessChallange.objects.all()
      
      # 新增：生成客户与业务挑战的关联映射，key为客户ID，value为关联业务挑战ID列表
      client_bc_mapping = {}
      for client in client_list:
          # 通过Product多对多关系反向查询关联的业务挑战，去重
          related_bc_ids = BusinessChallange.objects.filter(
              product__client_list=client
          ).distinct().values_list("id", flat=True)
          client_bc_mapping[client.id] = list(related_bc_ids)
  
      return render(request, "filter.html", {
          "client_list": client_list,
          "business_challange_list": bc_list,
          "client_bc_mapping": client_bc_mapping
      })
  

• 模板补充属性与全局变量
  给两类复选框分别加自定义数据属性存对应ID，同时把后端传的映射转为JS可直接读取的变量：

  <!-- 客户维度Tab（client_list区域）复选框示例 -->
  <div class="tab-pane" id="client-tab">
      {% for client in client_list %}
      <label class="form-check">
          <input type="checkbox" class="form-check-input client-cb" 
                 name="client" value="{{ client.id }}" 
                 data-client-id="{{ client.id }}">
          <span class="form-check-label">{{ client.name }}</span>
      </label>
      {% endfor %}
  </div>
  
  <!-- 业务挑战维度Tab（business_challange区域）复选框示例 -->
  <div class="tab-pane" id="bc-tab">
      {% for bc in business_challange_list %}
      <label class="form-check">
          <input type="checkbox" class="form-check-input bc-cb" 
                 name="business_challange" value="{{ bc.id }}"
                 data-bc-id="{{ bc.id }}">
          <span class="form-check-label">{{ bc.name }}</span>
      </label>
      {% endfor %}
  </div>
  
  <!-- 注入关联映射到JS -->
  <script>
      window.CLIENT_BC_MAP = JSON.parse('{{ client_bc_mapping|safe }}');
  </script>
  

• 替换原有全量禁用的JS逻辑
  每次客户复选框状态变化时，先计算所有选中客户覆盖的业务挑战ID并集，再逐个更新业务挑战复选框的禁用状态：

  document.addEventListener('DOMContentLoaded', () => {
      const clientCbs = document.querySelectorAll('.client-cb');
      const bcCbs = document.querySelectorAll('.bc-cb');
  
      const updateBcState = () => {
          // 收集所有选中的客户ID
          const selectedClientIds = Array.from(clientCbs)
              .filter(cb => cb.checked)
              .map(cb => Number(cb.dataset.clientId));
  
          // 未选中任何客户时，全部业务挑战可选
          if (!selectedClientIds.length) {
              bcCbs.forEach(cb => {
                  cb.disabled = false;
              });
              return;
          }
  
          // 计算选中客户覆盖的所有业务挑战ID并集
          const allowedBcIds = new Set();
          selectedClientIds.forEach(cid => {
              (window.CLIENT_BC_MAP[cid] || []).forEach(bcid => allowedBcIds.add(bcid));
          });
  
          // 逐个更新业务挑战复选框状态
          bcCbs.forEach(cb => {
              const bcId = Number(cb.dataset.bcId);
              if (allowedBcIds.has(bcId)) {
                  cb.disabled = false;
              } else {
                  cb.disabled = true;
                  cb.checked = false; // 禁用时取消已选中状态，避免提交无效筛选值
              }
          });
      };
  
      // 绑定变化事件
      clientCbs.forEach(cb => cb.addEventListener('change', updateBcState));
      // 页面初始化时执行一次，适配筛选条件回填场景
      updateBcState();
  });
  

排查提示：

1. 模板中输出JSON必须加|safe过滤器，否则Django会转义引号导致JS解析失败
2. 对比ID时统一转为数字类型，避免字符串和数字类型不匹配导致判断失效
3. 如果你用了自定义中间表关联多对多关系，只需要调整视图中关联ID的查询逻辑即可，前端逻辑不需要改动

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