时间戳

首页 > 解决方案 > 当某些选择复选框不存在时如何禁用下拉项

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

问题描述

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

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

Arina
Diana
Jane
....

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

Jake
Andrew
William
....

HTML Page 3 有宠物名字的复选框：

Milo
Ollie
Teddy
...

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

您可以从以下代码片段中查看 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. Boys, Pets在女孩页面中禁用下拉选项。
  2. Girls, Pets在男孩页面中禁用下拉选项。
  3. Girls, Boys在宠物页面中禁用下拉选项。

请告诉我如何做到这一点。我只想为此使用一个 Javascript 文件，因为实际上有许多这样的 HTML 页面具有不同的组合（教师、歌手、吉他手等），我只是提供了一个示例以便于理解。提前致谢。

标签： javascriptjquery

解决方案

因此，您必须在每个页面上保留页面标识，例如在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()调用。

推荐阅读