Отключать или включать флажки, если они принадлежат родительскому классу

У меня есть 2 вкладки со списком флажков. Я хочу создать зависимые чекбоксы, так что если пользователь выберет чекбокс на первой вкладке, то он отключит все чекбоксы на вкладке 2, которые не принадлежат чекбоксу на вкладке 1.

Оба client_list и business_challange являются фильтрами для моих продуктов и они связаны отношением ManyToMany с моделью Product (модели с видом ниже).

html файл

<div class="container">

  <ul class="nav nav-tabs flex-row f-12 mb-3" id="myTab" role="tablist">
    <li class="nav-item" role="presentation">
      <button class="nav-link active" id="client-list-tab" data-bs-toggle="tab" data-bs-target="#client_list" type="button" role="tab" aria-controls="client_list" aria-selected="true">Client</button>
    </li>
    
    <li class="nav-item" role="presentation">
      <button class="nav-link" id="business-challange-tab" data-bs-toggle="tab" data-bs-target="#business_challange" type="button" role="tab" aria-controls="business_challange" aria-selected="false">Challanges</button>
    </li>
  </ul>

  <div class="tab-content filters" id="myTabContent">

    <div class="tab-pane fade show active" id="client_list" role="tabpanel" aria-labelledby="client-list-tab">
      <div class="parent-checkbox">
        {% for object in client_list %}
          <div class="form-check">
            <input class="form-check-input" type="checkbox" value="{{object.title}}" id="{{object.title}}" data-filter="client_list" name="showCb" onclick="showMe('uncheck-all')">
            <label class="form-check-label ps-2" for="{{object.title}}">
                {{object.title}}
            </label>
          </div>
        {% endfor %}
      </div>
    </div>
    
    <div class="tab-pane fade" id="business_challange" role="tabpanel" aria-labelledby="business-challange-tab">
      <div class="child-checkbox">
        {% for object in business_challange %}
          <div class="form-check">
            <input class="form-check-input" type="checkbox" value="{{object.title}}" id="{{object.title}}" data-filter="business_challange" name="showCb" onclick="showMe('uncheck-all')">
            <label class="form-check-label ps-2" for="{{object.title}}">
                {{object.title}}
            </label>
          </div>
        {% endfor %}
      </div>
    </div>

  </div>
</div>

</div>

js файл

$(document).on('click',
  '.parent-checkbox input[type=checkbox]',
  function(event) {

    // If parent-checkbox is checked add 
    // disabled attributes to its child
    if ($(this).is(":checked")) {
      $(this).closest(".container").
      find(".child-checkbox .form-check > input[type=checkbox]").
      attr("disabled", false);
    } else {

      // Else add disabled attrubutes to its 
      // all child checkboxes  
      $(this).closest(".container").
      find(".child-checkbox .form-check > input[type=checkbox]").
      attr("disabled", true);
    }
  }
);

models.py

class Client(models.Model):
    title = models.CharField(max_length=100, default='')
    short_description = models.CharField(max_length=250, default='')

class BusinessChallange(models.Model):
    title = models.CharField(max_length=150, default='-')

class Product(models.Model):
    title = models.CharField(max_length=400, default='')
    business_challange = models.ManyToManyField(BusinessChallange, related_name='business_challange_product', blank=True, default='-')
    client = models.ManyToManyField(Client, blank=True)
    status = models.IntegerField(choices=STATUS, default=0)

views.py

class GuidedSearch(LoginRequiredMixin, ListView):
    login_url = 'login'
    redirect_field_name = 'login'
    template_name = 'product_filters.html'
    model = Product
    queryset = Product.objects.all()

    def get_context_data(self, **kwargs):
        context = super(GuidedSearch, self).get_context_data(**kwargs)
        client_list = Client.objects.filter(product__status=1)
        business_challange = BusinessChallange.objects.filter(product__status=1)

        context['client_list'] = client_list
        context['business_challange'] = business_challange
        return context

$(document).on('click',
  '.parent-checkbox input[type=checkbox]',
  function() {

    if ($(this).is(":checked")) {
      const data_class = $(this).data('class');
      
      $(this).closest(".container").
      find('.child-checkbox .form-check > input[type=checkbox]:not([data-class="' + data_class + '"])').
      attr("disabled", true);
    } else {

      const data_class = $(this).data('class');
      
      $(this).closest(".container").
      find('.child-checkbox .form-check > input[type=checkbox]').
      attr("disabled", false);
    }
  }
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">

  <div class="parent-checkbox">
    <p>parents</p>
    
    <div class="form-check">
      <input data-class="A" type="checkbox" value="A1" id="A1" name="A1">
      <label for="A1">A</label>
    </div>

    <div class="form-check">
      <input data-class="B" type="checkbox" value="B1" id="B1" name="B1">
      <label for="B1">B</label>
    </div>
  </div>

  <hr>

  <div class="child-checkbox">
    <p>children</p>
    
    <div class="form-check">
      <input data-class="A" type="checkbox" value="A2" id="A2" name="A2">
      <label for="A2">A</label>
    </div>

    <div class="form-check">
      <input data-class="B" type="checkbox" value="B2" id="B2" name="B2">
      <label for="B2">B</label>
    </div>
  </div>

</div>