时间戳

首页 > 解决方案 > 如何使 fontawsome 图标在禁用的按钮中旋转

css - 如何使 fontawsome 图标在禁用的按钮中旋转

问题描述

我有一个带有提交按钮的表单：

<button type="submit" class="btn btn-success dis-form-button">
  <i class="spinner fa fa-spinner fa-spin"></i>
    Sign-in
</button>

微调器图标在页面加载时隐藏。当我提交表单时，我捕获了 onSubmit 事件并禁用按钮并显示微调器图标，但是当按钮被禁用时微调器不旋转？有任何想法吗？

提前致谢。

标签： cssfont-awesome

解决方案

我认为您的问题不在于按钮上的 disabled 属性。这个答案更像是一个非答案，但这里有一个片段，显示了你描述的功能正常工作。

$('form').on('submit', function(e) {
  e.preventDefault();
  $('.dis-form-button').prop('disabled', true);
});
.dis-form-button .spinner {
  display: none;
}

.dis-form-button:disabled .spinner {
  display: inline-block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />

<form>
  <button type="submit" class="btn btn-success dis-form-button">
  <i class="spinner fa fa-spinner fa-spin"></i>
    Sign-in
</button>
</form>

推荐阅读