Javascript jQuery在html上循环，在更改时，查找类，删除它

因此，我在一个页面上有多个带有选择的表单。对于每个表单，我希望submit按钮有一个禁用的类，直到选择了一个选项，此时按钮将丢失禁用的类。每个表单必须独立于其他表单工作。我似乎无法使用Next或Find使其正常工作。这是我的密码：

<-- FORM ONE -->

<form>
  <label for="available-countries-#variables.x#">Available Countries</label>
  <select id="available-countries-#variables.x#" class="form-control available-countries-selector">
    <option value="0">-- Select Country --</option>
    <option value="1">Australia</option>
    <option value="2">Brazil</option>
  </select>
  <button type="submit" class="btn btn-default disabled" role="button">Submit</a>
</form>

<-- FORM TWO -->

<form>
  <label for="available-countries-#variables.x#">Available Countries</label>
  <select id="available-countries-#variables.x#" class="form-control available-countries-selector">
    <option value="0">-- Select Country --</option>
    <option value="1">Argentina</option>
    <option value="2">France</option>
  </select>
  <button type="submit" class="btn btn-default disabled" role="button">Submit</a>
</form>

-- JS --

$('.available-countries-selector').change(function(){    
  if($(this).val() !== '0'){
    $(this).find('btn-default').removeClass('disabled');
  } else {
    $(this).find('btn-default').addClass('disabled');
  }
});

在JS上下文中，任何帮助都将不胜感激，这就是元素。由于btn默认值不在select中，因此无法使用该代码找到它

相反，您可以转到最近的表单父级并从那里找到它：

$(this).closest("form").find('btn-default').removeClass('disabled');

---

您需要在当前表单中查找按钮。最好的方法是使用

如何使用事件冒泡对其进行编码：

$(document).on("change", ".available-countries-selector", function(){  
    var isDisabled = $(this).val() === "0";
    $(this).closest("form").find('btn-default').toggleClass('disabled', isDisabled);
});

---

理想情况下，您可以将文档设置为更接近表单的元素。

提交按钮不在您正在使用的选择器中，因此$this.find将不起作用。但是，您可以使用$this.next，因为提交按钮紧跟在选择下拉列表之后，如下所示：

$('.available-countries-selector').change(function(){    
  if($(this).val() !== '0'){
    $(this).next().removeClass('disabled');
  } else {
    $(this).next().addClass('disabled');
  }
});

您正在用a关闭s，并且您的查找没有查找类名，因为您排除了点，也找不到兄弟。用于查找下一个.btn默认值：

更新谢谢@TrueBlueAussie 您可以使用.toggleClass使其更简单：

$('.available-countries-selector').change(function(){    
  $(this).next('.btn-default').toggleClass('disabled', $(this).val());
});

---

感谢您的回答，exampletoggleClass还可以将布尔值作为开关，因此您可以将所有内容缩短为：$this.next.toggleClass'disabled'，$this.val；双重否定？：只需使用$this.closestform.find'btn-default'。toggleClass'disabled'，$this.val；使用带有开关值和+1的toggleClass可以很好地建议使用委托事件处理程序：toggleClass也可以将布尔值作为开关，因此您可以将所有内容缩短为：$this.next'.btn default'.toggleClass'disabled'，$this.val@真是个好建议。

$('.available-countries-selector').change(function(){    
  if($(this).val() !== '0'){
    $(this).next('.btn-default').removeClass('disabled');
  } else {
    $(this).next('.btn-default').addClass('disabled');
  }
});

$('.available-countries-selector').change(function(){    
  $(this).next('.btn-default').toggleClass('disabled', $(this).val());
});