How to make disabled state of font awesome icon button?

Question

I am using font awesome icon button and I need to have a disabled state of the icon. I am able to make it look like disabled button using Bootstrap disabled class but it's clickable. Is there any way to make is non-clickable ?

Here is my HTML code:--

user_9140740 · Answer

use pointer-events: none;

button{
    pointer-events: none;
}

user_2813224 · Answer

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

After clarifying what OP really wanted: ***to keep button.disabled from stealing focus from enabled buttons. Updated demo does that but not to button[disabled] those are truely dead to the world.

`[disabled]` Attribute Always Works

[disabled] attribute works. Bootstrap .disabled class does not. See the tests in demo below.

Demo

$('.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
}

user_6766919 · Answer

user_2756832 · Answer

You can try in this way also.

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

user_8053092 · Answer

It worked using pointer-events on icon.

Here is my answer:-

user_5841382 · Answer

You can also use onclick="return false;" to make sure it won't fire click event.

How to make disabled state of font awesome icon button?

6 Answers

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

[disabled] Attribute Always Works

Demo

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

`[disabled]` Attribute Always Works