按钮css以禁用按钮

Question

I是引导程序的新手。我试着使用Bootstrap来管理应用程序中的按钮逻辑，但我很困惑。

我发现了这个JavaScript代码：

$('#reportButton').prop('disabled', true);
$('#reportButton').prop('disabled', false);

如果我将disabled设置为true，按钮将被禁用，但方式非常低。活动被阻止，但按钮看起来并不专业。光标与整个页面上的光标相同，如果按钮使用btn-sm表示小按钮，则按钮不会改变颜色，这意味着它看起来像是活动的。

如果我加上也没有变化

$('#reportButton').addClass('disabled');

这让我很困惑。让它看起来被禁用并将禁用的光标悬停在悬停位置的最佳方法是什么？

我使用：https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.jshttps://code.jquery.com/jquery-3.3.1.slim.min.js

添加的信息：按钮代码：

<button type="button" class="btn-primary btn-sm" id="logoutButton">Logout</button>
<button type="button" class="btn btn-info" style="width:802px;" id="reportButton">Report Anzeigen</button>

JavaScript是：

const sendCase = document.getElementById('sendButton');
function disableButtons(stateSwitch){
$('#logoutButton').prop('disabled', stateSwitch);
$('#reportButton').prop('disabled', stateSwitch);
}
sendCase.addEventListener('click', function(e) {
disableButtons(true);
});

const sendCase = document.getElementById('sendButton');
function disableButtons(stateSwitch) {
$('#logoutButton').prop('disabled', stateSwitch);
$('#reportButton').prop('disabled', stateSwitch);
}
sendCase.addEventListener('click', function(e) {
disableButtons(true);
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<button type="button" class="btn-primary btn-sm" id="logoutButton">Logout</button>
<button type="button" class="btn btn-info" style="width:802px;" id="reportButton">Report Anzeigen</button>

Answer 1

您可以向按钮添加一个类，当鼠标悬停在按钮上时，该类将显示一个"不允许"的光标。

$('#reportButton').prop('disabled', true);
$('#reportButton').addClass('disabled');

.disabled{
cursor:not-allowed;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<button class="btn btn-primary" id="reportButton">Click</button>
</div>
</div>
</div>

https://jsfiddle.net/ciammarino/xomjew21/13/