如何制作禁用状态的 Font Awesome 图标按钮？

Question

我正在使用字体awesome图标按钮，我需要有一个禁用状态的图标。我能够使用Bootstrap禁用类使其看起来像是一个禁用的按钮，但它仍然可以被点击。有没有办法使其不可点击？

以下是我的HTML代码：--

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<button class='btn btn-primary disabled' disabled>
  <i class="fa fa-search"></i>
</button>

- user8053092

---

你在<button>上已经有一个“disabled”标签，它怎么还能被点击？ - liusy182

图标是可点击的，如果我不使用字体图标，则它不可点击。 - user8053092

@user8053092 你可能弄错了，[disabled] 属性在两种情况下都有效，请看我的回答。 - zer00ne

@zer00ne，是的，我明白了。但是点击您的最后一个按钮（已启用），然后点击禁用的按钮（只需点击图标），已启用按钮的活动状态就会消失。 - user8053092

@user8053092 是的，这就是它一直以来的工作方式，“：active”只持续到用户释放鼠标按钮。您所看到的是“focus”，这也是正确的行为。 - zer00ne

@user8053092 好的，现在我明白了，请查看更新。 - zer00ne

Answer 1

使用 pointer-events: none;。

button{
    pointer-events: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<button class='btn btn-primary disabled' disabled>
  <i class="fa fa-search"></i>
</button>

- לבני מלכה

Answer 2

.focus(), trigger(), & .blur()

在澄清了OP真正想要的内容之后：***保持button.disabled不会从启用的按钮中夺取focus。更新后的演示确实做到了这一点，但对于那些被禁用的button[disabled]来说，它们确实已经失去了作用。

[disabled]属性始终有效

[disabled]属性是有效的。Bootstrap .disabled类则不是。请参见下面演示中的测试。

演示

$('.btn').on('click', function(e) {
  console.log('clicked')
});


$('.btn').not('.disabled').on('click', function() {
  $('.btn').removeClass('lastFocus');
  $(this).addClass('lastFocus');
});

$('.disabled').on('focus', function(e) {
  $(this).blur();
  $('.lastFocus').trigger('focus');
});

b {
  color: cyan
}

u {
  color: black;
  font-weight: 700
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<button class='btn btn-primary' disabled>
  <i class="fa fa-search"></i><b>[disabled] attribute</b>
</button>

<button class='btn btn-primary disabled' disabled>
  <i class="fa fa-search"></i><b>[disabled] attribute</b> and <u>.disabled class</u>
</button>

<button class='btn btn-primary disabled'>
  <i class="fa fa-search"></i><u>.disabled class</u>
</button>

<button class='btn btn-primary disabled'>
  <u>.disabled class</u>
</button>

<button class='btn btn-primary'>
  <i class="fa fa-search"></i>enabled
</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

- zer00ne

Answer 3

使用这个

   

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <button class='btn btn-primary disabled' disabled style="pointer-events:none">
      <i class="fa fa-search" ></i>
    </button>

- ellipsis

Answer 4

你也可以尝试这种方式。

.xyz
        {
        cursor: not-allowed;
        pointer-events: none;
        color: #c0c0c0;
        background-color: #ffffff;
        }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<button class='btn btn-primary xyz'>
  <i class="fa fa-search"></i>
</button>

- Kandy

Answer 5

在图标上使用指针事件是有效的。

以下是我的答案：

<button class='btn btn-primary disabled' disabled>
    <i class="fa fa-search" style="pointer-events:none"></i>
</button>

- user8053092

Answer 6

您还可以使用onclick="return false;"来确保它不会触发点击事件。

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<button class='btn btn-primary disabled' onclick="return false;" disabled >
  <i class="fa fa-search"></i>
</button>

- Daut