Как сделать так, чтобы шрифт отключил состояние значка? - PullRequest
Новая
       6

Как сделать так, чтобы шрифт отключил состояние значка?

0 голосов
/ 14 января 2019

Я использую кнопку со значком шрифта, и мне нужно отключить состояние значка. Я могу сделать так, чтобы она выглядела как отключенная кнопка с помощью отключенного класса 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>

Ответы [ 6 ]

0 голосов
/ 14 января 2019

Вы также можете использовать 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>
0 голосов
/ 14 января 2019

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

После выяснения, что на самом деле хотел ОП: ***, чтобы 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>
0 голосов
/ 14 января 2019

Работало с использованием событий указателя на иконке.

Вот мой ответ: - 

<button class='btn btn-primary disabled' disabled>
    <i class="fa fa-search" style="pointer-events:none"></i>
</button>
0 голосов
/ 14 января 2019

Вы можете попробовать таким же образом. 

.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>
0 голосов
/ 14 января 2019

Используйте это 

   

 <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>
0 голосов
/ 14 января 2019

использование 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>
...