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

jQuery loop over html, on change, find class, remove it

本文关键字：查找 删除 循环 html jQuery      更新时间：2023-09-26

所以我在一个页面上有多个带有选择的表单。对于每个表单，我希望提交按钮有一个禁用类，直到选择一个选项，此时按钮应该丢失禁用的类(每个表单必须独立于其他表单工作(。我似乎无法使用"下一步"或"查找"来使其正常工作。这是我的代码：

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

任何帮助将不胜感激

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

var isEnabled = $(this).val() !== '0';
$(this).closest("form").find('btn-default').toggleClass('disabled', !isEnabled);

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

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

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

在 JS 上下文中，this是<select>元素。由于btn-default不在选择范围内，因此它不会使用该代码找到它。

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

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

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

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

JSFiddle

你用一个</a>结束你的<button>，你的find()没有寻找类名(因为你已经排除了点(，也找不到同级。使用next([selector])查找下一个.btn-default： 

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

http://jsfiddle.net/mL9h2fof/

更新(谢谢@TrueBlueAussie(
你可以使用 .toggleClass 使这更简单：

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

http://jsfiddle.net/mL9h2fof/1/

相关文章：