флажок серого цвета указывает c, если выбран другой флажок (в jQuery / javascript)

Question

У меня есть флажок, который при нажатии (demographic_checkbox), я бы хотел, чтобы он выделил серым цветом другой флажок на странице (snapshot_checkbox), чтобы пользователь не мог выбрать оба флажка вместе. Как бы я go сделал это?

Единственный способ, о котором я могу подумать, это что-то вроде:

$(document).on('click', 'input[class$="targeting"]', function () {
  if (this.checked) {
    $('input[class$="clicks"]').not(this).prop('disabled', true);
  } else {
    $('input[class$="clicks"]').not(this).prop('disabled', false);
  }
});

Но это будет работать только для отключения всех флажков в том же классе, что НЕ является выбранным, в отличие от отключения только одного указанного c текстового поля (которое находится в другом классе).

HTML:

<div class="targeting">
  <h1>2. Targeting</h1>
  <ul>
    <li>
      <input type="checkbox" name="geographic" value="0.00" id="geographic_checkbox">Geographic<br>
      <p id="geographic_text" style="display:none">+£0.08 CPC</p>
      <div id="geographic_suboptions" class="hidden">
        <ul>
          <li><input type="checkbox" name="regions" value="0.08" id="regions_checkbox">Regions<br></li>
          <p id="regions_text" style="display:none">+£0.08 CPC</p>
          <li><input type="checkbox" name="cities" value="0.08" id="cities_checkbox">Cities<br></li>
          <p id="cities_text" style="display:none">+£0.08 CPC</p>
          <li><input type="checkbox" name="towns" value="0.08" id="towns_checkbox">Towns<br></li>
          <p id="towns_text" style="display:none">+£0.08 CPC</p>
          <li><input type="checkbox" name="ringfencing" value="0.09" id="ringfencing_checkbox">Ring-Fencing<br></li>
          <p id="ringfencing_text" style="display:none">+£0.08 CPC</p>
        </ul>
      </div>
    </li>
  </ul>
  </li>
  </ul>
  <ul>
    <li>
      <input type="checkbox" name="demographic" value="0.00" id="demographic_checkbox">Demographic<br>
      <p id="demographic_text" style="display:none">+£0.08 CPC</p>
      <div id="demographic_suboptions" class="hidden">
        <ul>
          <li><input type="checkbox" name="age" value="0.08" id="age_checkbox">Age<br></li>
          <p id="age_text" style="display:none">+£0.08 CPC</p>
          <li><input type="checkbox" name="salary" value="0.09" id="salary_checkbox">Salary<br></li>
          <p id="salary_text" style="display:none">+£0.08 CPC</p>
          <li><input type="checkbox" name="interests" value="0.09" id="interests_checkbox">Interests<br></li>
          <p id="interests_text" style="display:none">+£0.08 CPC</p>
        </ul>
      </div>
    </li>
  </ul>
  </li>
  </ul>
    <ul>
     <li>
      <input type="checkbox" name="contextual" value="0.10" id="contextual_checkbox" onclick="ContextualFunction()">Contextual (Sector)<br>
      <p id="contextual_text" style="display:none">+£0.10 CPC</p>
     </li>
    </ul>
</div>
</div>

<div class="selectproduct">
    <h1>3. Select Product</h1>
    <input type="checkbox" class="product" name="snapshot" value="0.09" id="snapshot_checkbox" onclick="SnapshotFunction()">Snapshot (Targetoo)<br>
    <p id="snapshot_text" style="display:none">Snapshot ring-fences a location or a series of locations, and collects information of which handsets are there at a given time.
    <br>
    <br>By using this information, we can serve advertising live to those devices.
    </p>
    <input type="checkbox" class="product" name="targetedmobiledisplay" value="0.08" id="tmd_checkbox"> Targeted Mobile Display<br>
    <input type="checkbox" class="product" name="behaviouralpush" value="0.07">Behavioural Push<br>
    <input type="checkbox" class="product" name="mobileoverlay" value="0.06">Mobile Overlay<br>
    <input type="checkbox" class="product" name="landingpage" value="0.08">Landing Page<br>
    <input type="checkbox" class="product" name="video" value="0.07" id="video_checkbox">Video<br>
    <p id="video_text" style="display:none">Video will be sold on a CPCV (Cost per Completed View) basis, NOT CPC. This is the industry standard for video advertising.</p>
</div>

Answer 1

Поскольку у вас есть идентификаторы, назначенные для флажков, то вы можете напрямую использовать идентификаторы, чтобы включить или отключить флажки, см. Ниже код

$(function(){
   $('#demographic_checkbox, #snapshot_checkbox').on('change', function(){
        var status = $(this).is(':checked');
        $('#demographic_checkbox, #snapshot_checkbox').not(this).prop('disabled', status);
   });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="targeting">
  <h1>2. Targeting</h1>
  <ul>
    <li>
      <input type="checkbox" name="geographic" value="0.00" id="geographic_checkbox">Geographic<br>
      <p id="geographic_text" style="display:none">+£0.08 CPC</p>
      <div id="geographic_suboptions" class="hidden">
        <ul>
          <li><input type="checkbox" name="regions" value="0.08" id="regions_checkbox">Regions<br></li>
          <p id="regions_text" style="display:none">+£0.08 CPC</p>
          <li><input type="checkbox" name="cities" value="0.08" id="cities_checkbox">Cities<br></li>
          <p id="cities_text" style="display:none">+£0.08 CPC</p>
          <li><input type="checkbox" name="towns" value="0.08" id="towns_checkbox">Towns<br></li>
          <p id="towns_text" style="display:none">+£0.08 CPC</p>
          <li><input type="checkbox" name="ringfencing" value="0.09" id="ringfencing_checkbox">Ring-Fencing<br></li>
          <p id="ringfencing_text" style="display:none">+£0.08 CPC</p>
        </ul>
      </div>
    </li>
  </ul>
  </li>
  </ul>
  <ul>
    <li>
      <input type="checkbox" name="demographic" value="0.00" id="demographic_checkbox">Demographic<br>
      <p id="demographic_text" style="display:none">+£0.08 CPC</p>
      <div id="demographic_suboptions" class="hidden">
        <ul>
          <li><input type="checkbox" name="age" value="0.08" id="age_checkbox">Age<br></li>
          <p id="age_text" style="display:none">+£0.08 CPC</p>
          <li><input type="checkbox" name="salary" value="0.09" id="salary_checkbox">Salary<br></li>
          <p id="salary_text" style="display:none">+£0.08 CPC</p>
          <li><input type="checkbox" name="interests" value="0.09" id="interests_checkbox">Interests<br></li>
          <p id="interests_text" style="display:none">+£0.08 CPC</p>
        </ul>
      </div>
    </li>
  </ul>
  </li>
  </ul>
    <ul>
     <li>
      <input type="checkbox" name="contextual" value="0.10" id="contextual_checkbox" onclick="ContextualFunction()">Contextual (Sector)<br>
      <p id="contextual_text" style="display:none">+£0.10 CPC</p>
     </li>
    </ul>
</div>
</div>

<div class="selectproduct">
    <h1>3. Select Product</h1>
    <input type="checkbox" class="product" name="snapshot" value="0.09" id="snapshot_checkbox" onclick="SnapshotFunction()">Snapshot (Targetoo)<br>
    <p id="snapshot_text" style="display:none">Snapshot ring-fences a location or a series of locations, and collects information of which handsets are there at a given time.
    <br>
    <br>By using this information, we can serve advertising live to those devices.
    </p>
    <input type="checkbox" class="product" name="targetedmobiledisplay" value="0.08" id="tmd_checkbox"> Targeted Mobile Display<br>
    <input type="checkbox" class="product" name="behaviouralpush" value="0.07">Behavioural Push<br>
    <input type="checkbox" class="product" name="mobileoverlay" value="0.06">Mobile Overlay<br>
    <input type="checkbox" class="product" name="landingpage" value="0.08">Landing Page<br>
    <input type="checkbox" class="product" name="video" value="0.07" id="video_checkbox">Video<br>
    <p id="video_text" style="display:none">Video will be sold on a CPCV (Cost per Completed View) basis, NOT CPC. This is the industry standard for video advertising.</p>
</div>