求助：如何用JavaScript根据元素类名禁用按钮？代码未生效

需求：当页面中存在带有exceeded-size类的元素时，禁用id为btnSubmit的提交按钮，但现有jQuery代码未生效。

用户提供的代码：

HTML结构 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-container" data-image-index="0" id="mup-image-0" data-acceptable-image="0">
  <div class="image-size"> 3.1 MB </div>
  <div class="exceeded-size"> greater than 1 MB </div>
  <img src="blob:http://127.0.0.1:8000/20bd149e-3368-4167-9b4b-a2719504a5ad" class="image-preview" alt="">
</div>
<div class="modal-footer">
  <button type="submit" id="btnSubmit" class="btn btn-primary  w-100">Save</button>
</div>

原jQuery代码 #

$(function() {
 if ($('div').hasClass('exceeded-size')) {
    $('#btnSubmit').prop('disabled', true);
 } else {
    $('#btnSubmit').prop('disabled', false);
 }
});

问题分析 #

1. 选择器逻辑错误：$('div').hasClass('exceeded-size')仅判断页面中第一个<div>元素是否包含目标类，而非检查所有div中是否存在带有该类的元素，判断范围不准确。
2. 仅执行一次判断：代码仅在页面DOM加载完成时执行一次，如果exceeded-size类是后续动态添加/移除（比如图片上传后才触发类变化），按钮状态不会自动更新。

解决方案 #

1. 修正判断逻辑，封装复用函数 #

先封装判断按钮状态的函数，确保判断逻辑准确且可复用：

function updateSubmitButtonStatus() {
  // 检查页面中是否存在带有exceeded-size类的元素
  const hasExceededElement = $('.exceeded-size').length > 0;
  // 设置按钮禁用状态
  $('#btnSubmit').prop('disabled', hasExceededElement);
}

2. 页面加载时初始化状态 #

在DOM加载完成时调用函数，设置初始状态：

$(function() {
  updateSubmitButtonStatus();
});

3. 处理动态类变化场景 #

如果exceeded-size类是动态添加/移除的（比如图片上传校验后更新），需要监听类变化事件来自动更新按钮状态。这里使用MutationObserver监听元素变化：

$(function() {
  updateSubmitButtonStatus();

  // 创建观察者实例，监听类变化和子元素变化
  const observer = new MutationObserver(() => {
    updateSubmitButtonStatus();
  });

  // 监听所有image-container元素的变化
  $('.image-container').each(function() {
    observer.observe(this, {
      attributes: true, // 监听元素属性变化（比如class）
      childList: true, // 监听子元素添加/移除
      subtree: true // 监听子树内的变化
    });
  });
});

替代方案：在触发类变化的回调中调用函数 #

如果明确知道触发exceeded-size类变化的时机（比如图片上传完成的回调函数），可以直接在该回调中调用updateSubmitButtonStatus()，这种方式比MutationObserver更高效：

// 示例：假设这是图片上传完成后的校验回调
function onImageUploadComplete() {
  // 这里是添加/移除exceeded-size类的逻辑
  // ...

  // 更新按钮状态
  updateSubmitButtonStatus();
}

内容的提问来源于stack exchange，提问作者Malik Zubair Mukhtar