JS空输入验证指示器需求实现及animate类异常排查

看起来你遇到的问题大概率是事件重复绑定或者状态判断逻辑不严谨导致的——尤其是多次点击.edit-toggle后事件叠加，再加上attr()和prop()混用处理disabled属性，才出现了无规则的类切换问题。咱们来一步步修复这个问题：

jQuery里处理disabled这类布尔属性，prop()比attr()更可靠。attr()操作的是HTML标签上的属性，而prop()直接操作DOM元素的状态，动态切换时不会出现状态不一致的情况。把你代码里的attr("disabled", true)改成prop("disabled", true)就好。

多次点击.edit-toggle后，如果每次都重新绑定输入框的事件，会导致事件叠加——输入时多次触发回调，自然会出现类无规则变化的情况。这里用带命名空间的事件解绑+绑定来解决：

// 绑定toggle的切换事件，只绑定一次
$('.edit-toggle').on('change', function() {
  const isEditEnabled = $(this).prop('checked');
  const $editInputs = $('.edit :input');
  const $indicators = $('.indicator');

  if (isEditEnabled) {
    // 启用输入框
    $editInputs.prop('disabled', false);
    
    // 先解绑同名空间的事件，避免重复绑定
    $editInputs.off('input.indicatorCheck').on('input.indicatorCheck', function() {
      const $currentInput = $(this);
      // 找到当前输入框对应的indicator（根据你的DOM结构调整，这里假设是同级/父容器下的元素）
      const $currentIndicator = $currentInput.closest('.edit').find('.indicator');
      
      // 输入框为空时添加animate类，否则移除
      if ($currentInput.val().trim() === '') {
        $currentIndicator.addClass('animate').show();
      } else {
        $currentIndicator.removeClass('animate');
      }
    });

    // 初始化一次当前输入框的状态
    $editInputs.trigger('input.indicatorCheck');
  } else {
    // 禁用输入框：移除类、隐藏元素，同时解绑输入事件
    $editInputs.prop('disabled', true);
    $indicators.removeClass('animate').hide();
    $editInputs.off('input.indicatorCheck');
  }
});

页面加载时，要根据.edit-toggle的初始状态，手动触发一次change事件，避免初始状态不一致：

// 页面加载完成后初始化状态
$(function() {
  $('.edit-toggle').trigger('change');
});

1. 事件重复绑定：之前的代码可能每次点击toggle都重新绑定了输入框的事件，导致输入时多次触发回调，用带命名空间的off()解绑后再绑定，就能避免这个问题。
2. attr() vs prop()：attr("disabled", false)不会正确移除禁用状态（布尔属性只要存在就是禁用），而prop()直接操作DOM的状态，切换更准确。
3. 状态初始化：页面加载时如果toggle默认是选中状态，手动触发change能确保输入框和indicator的状态同步。

内容的提问来源于stack exchange，提问作者Kyle Underhill