Как отключить выпадающий элемент, когда некоторые флажки выбора отсутствуют

Question

Я постараюсь объяснить это. Таким образом, у меня есть несколько HTML-страниц с выпадающим меню, которое устанавливает флажки при нажатии на каждый элемент.

HTML-страница 1 имеет флажки для женских имен:

Arina
Diana
Jane
....

HTML-страница 2 имеет флажки длямужские имена:

Jake
Andrew
William
....

HTML-страница 3 имеет флажки для имен домашних животных:

Milo
Ollie
Teddy
...

Теперь я использую выпадающее меню на этих трех HTML-страницах, которые я упомянул, чтобы выбрать этифлажки.

Вы можете увидеть живой рабочий пример для страницы Girls из следующего фрагмента кода.

Но код Javascript / jQuery, который я использую на этих 3 HTML-страницах (Girls, Boys, Pets):тот же самый. Итак, вот моя HTML-страница для девочек. Я просто прикрепляю здесь страницу для девочек, есть еще две страницы с другими данными. (Мальчики, домашние животные)

$("button.select-girls").on("click", selectGirls);

function selectGirls() {
  $('[data-group="girls"]').prop('checked', !0);

}

$("button.select-boys").on("click", selectBoys);

function selectBoys() {
  $('[data-group="boys"]').prop('checked', !0);

}

$("button.select-pets").on("click", selectPets);

function selectPets() {
  $('[data-group="pets"]').prop('checked', !0);

}


$("button.unselect-all").on("click", unselectAll);

function unselectAll() {
  $('[data-group="girls"], [data-group="boys"], [data-group="pets"]').prop('checked', !1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>


<div class="container-fluid py-4">
  <div class="row text-center">
    <div class="col-8 offset-2">
      <div class="btn-groups">
        <button class="btn btn-primary mr-2 unselect-all">Unselect All</button>

        <button class="btn btn-primary mr-2 dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Filter</button>

        <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
          <button class="dropdown-item select-girls" type="button">Girls</button>
          <button class="dropdown-item select-boys" type="button">Boys</button>
          <button class="dropdown-item select-pets" type="button">Pets</button>
        </div>
      </div>
    </div>
  </div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="container col-8 offset-2">
  <div class="table-responsive  shadow p-3 mb-5 bg-light rounded">
    <table id="grid" class="table table-hover">
      <thead class="thead-dark">
        <tr>
          <th data-type="string">?</th>
          <th data-type="string">Name</th>
          <th data-type="string">Age</th>
          <th data-type="string">University</th>
          <th class="wfixed" data-type="string">Status</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <input checked data-group="girls" type="checkbox" checked />
            <label for="check_us-east"></label>
          </td>
          <td>Arina</td>
          <td class="age"></td>
          <td></td>
          <td class="uni"></td>
        </tr>
        <tr>
          <td>
            <input checked data-group="girls" type="checkbox" checked />
          </td>
          <td>Diana</td>
          <td class="age"></td>
          <td></td>
          <td class="uni"></td>
        </tr>
        <tr>
          <td>
            <input checked data-group="girls" type="checkbox" checked />
          </td>
          <td>Jane</td>
          <td class="age"></td>
          <td></td>
          <td class="uni"></td>
        </tr>


      </tbody>
    </table>
    <div id="imageCell"></div>
  </div>
</div>

Итак, я пытаюсь достичь

1. Отключить опцию раскрывающегося списка Boys, Pets в Girls стр.
2. Отключить опцию раскрывающегося списка Girls, Pets, когда на странице Boys .
3. Отключить опцию раскрывающегося списка Girls, Boys, когда в Домашние животные стр.

Скажите, пожалуйста, как это сделать. Я хочу использовать для этого всего один файл Javascript, потому что на самом деле существует много таких HTML-страниц с разными комбинациями (учителя, певцы, гитаристы и т.п.), я просто привел пример для простоты понимания. Заранее спасибо.

Answer 1

Итак, вы должны сохранять идентификацию страницы на каждой из страниц, например, на Girl странице вы должны поместить что-то вроде

<input type="hidden" value="select-girls" id="identification"> И затем вы должны определить, какая из них будетenable или disable, например,

 var identification=$("#identification").val();
 <div class="dropdown-menu" aria-labelledby="dropdownMenu2">
      <button class="dropdown-item select-girls"  type="button">Girls</button>
      <button class="dropdown-item select-boys" type="button">Boys</button>
      <button class="dropdown-item select-pets" type="button">Pets</button>
  </div>
 $(".dropdown-item").attr("disabled",true);
 $("."+identification).removeAttr('disabled');

Таким образом, подход заключается в disabled всех кнопках в первый раз. И включить только один в соответствии со значением идентификации. Поместите идентификационное значение так же, как ваше имя класса, например, select-girls на странице Girls. Теперь select-girls - это ваш Class Name, используйте его для удаления атрибута disabled и, следовательно, сделайте его только необходимой кнопкой в ​​качестве включенной. Аналогично для мальчиков и домашних животных. для этих идентификационных значений было бы select-boys и select-pets соответственно.

Или

   $('.dropdown-item:not(.'+identification+')').attr("disabled",true);

:not() быстрее, предположительно, потому что механизм выбора jQuery Sizzle может оптимизировать его до нативного .querySelectorAll() звонок.

Answer 2

Насколько я понимаю, ваш тип (девочки, мальчики, домашние животные и т. Д.) Может быть с их номерами из Back-end. Таким образом, вы можете просто добавить некоторый атрибут типа данных в каждую кнопку следующим образом:

 <button ... data-type="girls" ... >
 <button ... data-type="boys" ... >
 <button ... data-type="pets" ... >
 <button ... data-type="peoplesWhoAnsweringLater" ... >

И если вы хотите, чтобы была включена только кнопка «Девочки», то вы можете добавить только это:

 $('.dropdown-menu .dropdown-item').each(function(index, value){
   $(this).prop('disabled', $(this).data('type') != 'girls'); // here you can inject any type of you want from back-end
 });

Этот скрипт будет работать для разных страниц и не выдаст ошибку о других типах, если их не существует