Jquery 当所有包含必需类的字段都已填充时，如何将类动态切换为div？

在我的表格中，我有两个选择框和一些文本输入。我所有的必填字段都有“required”类。如何使用jQuery检查所有必填字段是否为空，并在“下一步”按钮中切换类“禁用”

。类别选择{
显示：块；
边缘底部：20px；
宽度：140px；
}
.颜色选择{
显示：块；
边缘底部：20px；
宽度：140px；
}
.残疾人{
颜色：#aaa！重要；
背景：ddd！重要；
}
.下一步{
宽度：140px；
填充：15px；
颜色：#fff；
背景#0088cc；
文本对齐：居中；
光标：指针；
字体大小：粗体；
字体系列：arial；
字体大小：12px；
边缘顶部：50px；
}

选择类别
电话
计算机
平板
选择一种颜色
白色
蓝色
绿色
下一步

您可以执行以下操作：

$('select,input').change(function() {
  var s = $('.required').filter(function() {
    if ($(this).is("select")) {
      return $(this).val() == "";
    }
    if ($(this).is("input")) {
      return $(this).val().length == 0;
    }
  });
  if (s.length == 0)
    $(".next-step-btn").removeClass("disabled");
  else
    $(".next-step-btn").addClass("disabled");
});

演示

$（'select，input'）。在（“change keyup”，function（）上{
var s=$（'.required'）.filter（函数（）{
如果（$（this）.is（“选择”））{
返回$（this）.val（）==“”；
}
if（$（this）.is（“输入”））{
返回$（this）.val（）.length==0；
}
});
如果（s.length==0）
$（“.next step btn”）.removeClass（“已禁用”）；
其他的
$（“.next step btn”）.addClass（“disabled”）；
});
。类别选择{
显示：块；
边缘底部：20px；
宽度：140px；
}
.颜色选择{
显示：块；
边缘底部：20px；
宽度：140px；
}
.残疾人{
颜色：#aaa！重要；
背景：ddd！重要；
}
.下一步{
宽度：140px；
填充：15px；
颜色：#fff；
背景#0088cc；
文本对齐：居中；
光标：指针；
字体大小：粗体；
字体系列：arial；
字体大小：12px；
边缘顶部：50px；
}

选择类别
电话
计算机
平板
选择一种颜色
白色
蓝色
绿色
下一步
您可以使用ConditionAweasome！！当有人开始输入文本字段时，是否也可能触发事件？@Designer添加了keyup非常感谢您的努力和时间。它工作完美！我刚刚接受了你的回答；）