代码之家 › 专栏 › 技术社区 › Berglund

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

jquery javascript

Berglund · 技术社区 · 5 年前

我会尽力解释的。所以我有几个HTML页面,有一个下拉菜单,在每个项目上按下选中复选框。

HTML页面1中有用于女性姓名的复选框:

Arina
Diana
Jane
....

HTML第2页有男性姓名的复选框:

Jake
Andrew
William
....

HTML第3页有宠物名的复选框:

Milo
Ollie
Teddy
...

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

您可以从下面的代码片段中看到女孩页面的实时工作示例。

但是我在这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>

所以我要做的是

禁用下拉选项 Boys, Pets 进入时女孩第页。
禁用下拉选项 Girls, Pets 进入时男孩第页。
禁用下拉选项 Girls, Boys 进入时宠物第页。

请告诉我怎么做。我只想使用一个JavaScript文件,因为实际上有很多HTML页面,比如不同的组合(老师,歌手,吉他手),我只是提供了一个便于理解的例子。提前谢谢。

3 回复 | 直到 5 年前

404 Not Found 5 年前

所以,你必须在每一页上都保留页面的标识,例如 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 第页,现在 精选女孩 是你的吗 Class Name 使用此项删除 残疾人 因此使它成为唯一需要的按钮启用。同样的男孩和宠物页。因为这些识别值 select-boys 和 select-pets 分别是。

或者

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

:not() 更快,可能是因为jquery的选择器引擎sizzle可以将其优化为本机的 .querySelectorAll() 打电话来。

boolfalse 5 年前

据我所知,你得到的类型(女孩,男孩,宠物等)可能与他们的数字索引从后端。因此,您可以在每个按钮中添加一些数据类型属性,如下所示:

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

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