当某些选择复选框不存在时如何禁用下拉项

Question

我会尽力解释这一点。所以我有几个带有下拉菜单的 HTML 页面，当按下每个项目时会选择复选框。

HTML 页面 1 有女性名字的复选框：

Arina
Diana
Jane
....

HTML 页面 2 有男性名字的复选框：

Jake
Andrew
William
....

HTML 页面 3 有宠物名称复选框：

Milo
Ollie
Teddy
...

现在我在我提到的这 3 个 HTML 页面上使用下拉菜单来选择这些复选框。

您可以通过以下代码 sn-p 查看 Girls 页面的实时工作示例。

但是我在这 3 个 HTML 页面（女孩、男孩、宠物）上使用的 Javascript/jQuery 代码是相同的。所以这是我的女孩 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. 在Girls页面中禁用下拉选项Boys, Pets。
2. 在男孩页面中禁用下拉选项Girls, Pets。
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所有按钮。并且根据识别值只启用一个。将标识值与Girls 页面上的select-girls 的类名之一相同。现在select-girls 是您的Class Name，使用它来删除disabled 属性，从而使其仅启用所需的按钮。男孩和宠物页面也是如此。对于那些标识值将分别为select-boys 和select-pets。

或者

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

:not() 更快，大概是因为 jQuery 的选择器引擎 Sizzle 可以将其优化为原生的 .querySelectorAll() 调用。

Answer 2

据我了解，您的类型（女孩、男孩、宠物等）可能会从后端获得数字索引。所以你可以像这样在每个按钮中添加一些数据类型属性：

 <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
 });

此脚本适用于不同的页面，如果其他类型不存在，则不会引发错误