如何使字体真棒图标按钮的禁用状态？

Posted 2023-03-06

【中文标题】如何使字体真棒图标按钮的禁用状态？

【英文标题】：How to make disabled state of font awesome icon button?

【发布时间】：2019-06-08 04:06:52

【问题描述】：

我正在使用字体真棒图标按钮，我需要图标的禁用状态。我可以使用 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>

【问题讨论】：

你的上已经有了disabled标签，怎么还能点击呢？

图标是可点击的，如果我不使用 font-icons 那么它是不可点击的。

@user8053092 你一定弄错了，[disabled] 属性在这两种情况下都有效，请参阅我的answer

@zer00ne 是的，我知道了，但是单击您的最后一个按钮（启用）然后单击禁用按钮（仅在图标上），启用按钮的活动状态消失了。

@user8053092 是的，它总是这样工作，:active 只会持续到用户释放鼠标按钮。您看到的是focus，这也是正确的行为。

【参考方案1】：

.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>

【参考方案2】：

您也可以使用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>

【参考方案3】：

它使用图标上的指针事件工作。

这是我的答案：-

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

【参考方案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>

【参考方案5】：

使用这个

   

 <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>

【参考方案6】：

使用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>