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

Question

我正在使用超棒的字体图标按钮，并且我需要使图标处于禁用状态。我可以使用Bootstrap禁用类使它看起来像禁用按钮，但是它是可单击的。 有什么办法可以使非点击？

这是我的HTML代码：-

 <script>
 var slideIndex = 1; // This may skip the first image... maybe change to 0?

 showDivs(slideIndex);

 function plusDivs(n) {
  showDivs(slideIndex += n);
 }

 function showDivs(n) {
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}
  if (n < 1) {slideIndex = x.length}

  // Assuming we can show the next 8 images...
  var maxCount = slideIndex + 8;

  // However, there may not be 8 more images... 
  if(slideIndex + 8 > x.length){
    maxCount = slideIndex + (x.length - slideIndex);
  }

  // Hide all images...
  x.style.display = "none";   

  // Show the next 8 or so images...
  for (i = slideIndex; i <= maxCount; i++) {
    x[i].style.display = "block";
  } 
 }
 </script>

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>

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>

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>

Answer 5

它可以在图标上使用指针事件。

这是我的答案：-

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

Answer 6

您还可以使用var value = (cell.isPartOfMerge() ? cell.getMergedRanges()[0].getCell(1,1) : cell).getValue(); 来确保它不会触发点击事件。

onclick="return false;"