Html 提交按钮-一旦不再禁用，更改提交按钮的CSS

在我的表单中，在用户输入了所有必需的字段（输入字段中出现绿色复选标记）并且提交按钮不再“禁用”后，我希望我的提交按钮具有橙色文本和白色背景，如附件图像中所示，而不是当前所示的灰色背景和黑色文本。有人知道有没有办法改变这一点吗

功能电话号码（电话）{
var phoneno=/^\d{9}|\d{10}|\d{11}$/；
控制台日志（“电话：+phoneno.test（电话））；
返回电话号码测试（电话）；
}
$（'input[type=“tel”]”）。在（'keyup'，function（）上{
var$label=$（this）.closest（'label'）；
如果（$（this.val（）.trim（）！=“”）{
如果（$（this）.is（'#phone'））{
if（电话号码（$（this.val（）））{
$label.attr（'data-valid'，'valid'）；
$（this）.next（“i”）.removeClass（“fa-times-circle-o”）.addClass（“fa-check circle”）；
}否则{
$label.attr（'data-valid'，'error'）；
console.log（“这项工作”）；
$（this）.next（“i”）.removeClass（“fa检查圆”）.addClass（“fa-times-circle-o”）；
}
}否则{
$label.attr（'data-valid'，'valid'）；
log（“这是有效的”）
}
}否则{
$label.removeAttr（'data-valid'）；
log（“这是有效的”）
}
});
功能验证电子邮件（电子邮件）{
变量re=/^（[^（）[\]\\，；：\s@\“]+（\.[^（）[\]\，；：\s@\“]+）*）（\'+\”）（\[[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[1,3}.[0-9]{1,3}.]；
控制台日志（“电子邮件：+re.test（电子邮件））；
返回重新测试（电子邮件）；
}
$（'input[type=“text”]”）。在（'keyup'，function（）上{
var$label=$（this）.closest（'label'）；
如果（$（this.val（）.trim（）！=“”）{
如果（$（this）.is（'#email'））{
if（validateEmail（$（this.val（）））{
$label.attr（'data-valid'，'valid'）；
$（this）.next（“i”）.removeClass（“fa-times-circle-o”）.addClass（“fa-check circle”）；
}否则{
$label.attr（'data-valid'，'error'）；
console.log（“这工作1”）
$（this）.next（“i”）.removeClass（“fa检查圆”）.addClass（“fa-times-circle-o”）；
}
}否则{
$label.attr（'data-valid'，'valid'）；
console.log（“本工程2”）；
}
}否则{
$label.removeAttr（'data-valid'）；
console.log（“这工作3”）；
}
});
测试=函数（）{
如果（$（“#名字”）.val（）&&
$（“#姓”）.val（）&&
$（“#电子邮件”）.val（）&&
$（“#电话”）.val（）&&
$（“#城市”）.val（）&&
$（“#state”）.val（）&&
$（“#公司”）.val（））{
$（“#sub”）.removeAttr（“禁用”）；
}
}

正文{
颜色：#fff；
背景色：#f78e2a；
文本对齐：居中；
}
形式{
颜色：#fff；
背景色：#f78e2a；
文本对齐：居中；
字体系列：Lato；
}
* {
框大小：边框框；
}
.表格名称{
字号：38px；
颜色：#fff；
字体系列：“Lato”；
字母间距：70px；
}
输入[type=“tel”]{
宽度：100%；
身高：85%；
填充：10px；
背景色：#f9a558；
边框：1px实心#fff；
}
输入[type=“text”]{
宽度：100%；
填充：10px；
背景色：#f9a558；
边框：1px实心#fff；
}
输入[type=“text”]：焦点{
背景色：#fff；
}
输入[type=“text”]：已访问{
背景色：#fff；
}
输入[type=“tel”]：焦点{
背景色：#fff；
}
输入[type=“tel”]：已访问{
背景色：#fff；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
填充：5px0；
左边距：10%；
保证金权利：10%；
}
文本区{
宽度：100%；
背景色：#f9a558；
边框：1px实心#fff；
}
文本区域：焦点{
背景色：#fff；
}
#公司{
弹性基准：100%；
最大宽度：100%；
}
标签：第n个最后一个子项（-n+2）{
弹性基准：100%；
最大宽度：100%；
}
选择，
标签{
高度：50px；
宽度：48%；
利润率：2%1%；
文本对齐：左对齐；
字体系列：“Lato”；
}
#潜艇{
边界半径：6px；
宽度：120px；
高度：35px；
文本转换：大写；
显示：块；
边缘顶部：10px；
}
钮扣{
边缘顶部：10px；
背景色：#B9B9B9；
颜色：#9595；
边界半径：6px；
宽度：120px；
高度：35px；
左缘：1%；
显示：块；
}
按钮：焦点{
背景色：#fff；
颜色：#f78e2a；
}
@介质（最大宽度：426px）{
标签{
宽度：98%；
}
}
@介质（最小宽度：426px）{
.集装箱{
弯曲方向：行；
柔性包装：包装；
自我校准：灵活启动；
}
}
标签{
位置：相对位置；
}
法兰西{
位置：绝对位置；
底部：0；
右：0；
转换：翻译（-50%，-5%）；
不透明度：0；
过渡：不透明度.5s，颜色.5s；
}
[数据有效].fa{
不透明度：1；
颜色：绿色；
}
[data valid=“valid”].fa{
颜色：绿色；
}
[data valid=“error”].fa{
颜色：红色；
}
.错误{
显示：无；
颜色：红色；
字体大小：.7em；
位置：绝对位置；
左：10px；
排名：0；
转化：translateY（150%）；
}
[数据有效=“错误”]。错误{
显示：块；
}

名字
姓
电子邮件
请输入有效的电子邮件地址
电话
请输入有效的电话号码
城市
州/省
单位
评论
--没有--
来访者
镶嵌


--没有--
内部的
贸易展览会
网站
直销
社会化媒体
其他

这只能通过CSS实现：

根据需要在这两个规则中自定义CSS属性

#sub{  /* enabled */
  background-color:white;
  color:orange;
}
#sub:disabled{  /* disabled */
  background-color:grey;
  color:black;
}

---

@Louys基本上回答了你的问题，但你可能想检查一下你的C

#sub {
  border-radius: 6px;
  width: 120px;
  height: 35px;
  text-transform: uppercase;
  display: block;
  margin-top: 10px;
}

#sub:disabled {
  margin-top: 10px;
  background-color: #B9B9B9;
  color: #959595;
  border-radius: 6px;
  width: 120px;
  height: 35px;
  margin-left: 1%;
  display: block;
}

#sub:focus,
#sub:not(:disabled) {
  background-color: #fff;
  color: #f78e2a;
}

test = function() {
      if
      (
        $("#first_name").parent().attr('data-valid') == 'valid'
        && $("#last_name").parent().attr('data-valid') == 'valid'
        && $("#email").parent().attr('data-valid') == 'valid'
        && $("#phone").parent().attr('data-valid') == 'valid'
    && $("#city").parent().attr('data-valid') == 'valid'
    && $("#state").parent().attr('data-valid') == 'valid'
    && $("#company").parent().attr('data-valid') == 'valid'
  )
  {
    $("#sub").prop("disabled", false);
  }
  else
  {
    $("#sub").prop('disabled', true);
  }
}