有关 javascript 禁用按钮的光标样式的问题

Question

在我的Ruby on rails应用程序中，我在我的一个视图页面上使用了一些javascript来制作一个id为"submitorder"的提交按钮。我已经使用以下代码行成功地完成了此操作。

 $('#submitorder').prop('disabled', true);

它工作正常。

但是现在我想在将光标悬停在该提交按钮上时也设置为"不允许"。这就是为什么我使用以下代码行来禁用提交按钮，并使光标设置为"不允许"

$('#submitorder').prop('disabled', true);
$('#submitorder').css( 'cursor', 'not-allowed' );

但不幸的是，该按钮仅被禁用。光标样式没有变化。

请告诉我为什么会发生这种情况，并给我线索来解决这个问题。

提前感谢！！

Answer 1

添加/删除 CSS 类：

.not-allowed { cursor: not-allowed; }

注意：cursor：none;在 Firefox 3、Safari 5 和 Chrome 5 之前不受支持。在IE或Opera中完全不支持。Opera 不支持图像 URL 光标。在 IE 或 Opera 中不支持以下内容：不允许、禁止删除、垂直文本、全滚动、列调整大小、行大小调整。

您也可以让光标为图像：

.custom-not-allowed {
     cursor: url(images/not-allowed-cursor.png), auto;
}

Answer 2

var btn=document.getElementById('yourId');
btn.setAttribute('disabled',true);
btn.style.cursor='not-allowed';

<input id="yourId" type="button" value="disabled">

Answer 3

尝试设置css('cursor', 'none')

$('#submitorder').prop('disabled', true);
$('#submitorder').css('cursor', 'none');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="submitorder">submit</button>