Question

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

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

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

谢谢。

Answer 1

我认为您的问题不在于按钮上的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>

如何使Fontawsome图标在禁用的按钮中旋转

1 个答案: