Question

我正在触发一个事件，并且该元素具有类.pvtd。此后，我有更多具有相同类名的元素，因此我想对所有在该元素后具有相同类名的元素执行某些功能。

选择任何没有值的选项时，我要禁用下一个.pvtd。不应禁用所选元素之前的上一个.pvtd类，只能禁用下一个。知道我该怎么做吗？

$('.pvtd').on('change', function(event) {
  let value = $(`${this} option:selected`).val();
  if (!value) {
    $('.pvtd').nextAll().attr("disabled", "disabled");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-2">
  <label for="inputCity"><strong>Produce</strong></label>
  <select name="first" id="produce_rprt" class="pvtd">
    <option value="" selected="selected">Select Produce</option>
    <option value="1">Potato</option>
  </select>
</div>

<div class="form-group col-md-2">
  <label for="inputState"><strong>Variety</strong></label>
  <select name="variety" id="variety_rprt" class="pvtd">
    <option value="" selected="selected">Select Variety</option>
    <option value="1">Default</option>
  </select>
</div>

<div class="form-group col-md-2">
  <label for="inputState"><strong>Type</strong></label>
  <select name="type" id="type_rprt" class="pvtd">
    <option value="" selected="selected">Select Type</option>
    <option value="1">Default</option>
  </select>
</div>

<div class="form-group col-md-2">
  <label for="inputState"><strong>Defect</strong></label>
  <select name="defect" id="defect_rprt" class="pvtd">
    <option value="" selected="selected">Select Defect</option>
    <option value="1">Default</option>
  </select>
</div>

Answer 1

这里有两个问题。首先，this是引发事件的元素的引用。因此，您无法将其连接到jQuery选择器字符串。除此之外，您不需要，因为只需执行$(this).val()即可读取所选选项的值。

第二，nextAll()在这种情况下不起作用，因为.pvtd不是兄弟姐妹。要解决此问题，您可以选择所有元素，然后在需要时找到所有具有比当前元素更高索引的元素。

不过，鉴于您的以下评论：

如果我选择“选择品种”，我只希望禁用类型和缺陷。

在这种情况下，您不需要nextAll()，因为您只希望在.pvtd元素后加上单。为此，您可以使用eq()，如下所示：

var $pvtd = $('.pvtd').on('change', function(event) {
  let value = $(this).val();
  if (!value) {
    $('.pvtd').eq($(this).index('.pvtd') + 1).prop("disabled", true);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group col-md-2">
  <label for="inputCity"><strong>Produce</strong></label>
  <select name="first" id="produce_rprt" class="pvtd">
    <option value="" selected="selected">Select Produce</option>
    <option value="1">Potato</option>
  </select>
</div>
<div class="form-group col-md-2">
  <label for="inputState"><strong>Variety</strong></label>
  <select name="variety" id="variety_rprt" class="pvtd">
    <option value="" selected="selected">Select Variety</option>
    <option value="1">Default</option>
  </select>
</div>
<div class="form-group col-md-2">
  <label for="inputState"><strong>Type</strong></label>
  <select name="type" id="type_rprt" class="pvtd">
    <option value="" selected="selected">Select Type</option>
    <option value="1">Default</option>
  </select>
</div>
<div class="form-group col-md-2">
  <label for="inputState"><strong>Defect</strong></label>
  <select name="defect" id="defect_rprt" class="pvtd">
    <option value="" selected="selected">Select Defect</option>
    <option value="1">Default</option>
  </select>
</div>

接下来如何获取特定类的所有元素？

1 个答案: