javacriptによる無効化ボタンのカーソル・スタイリングに関する問題点

Question

私のRubyアプリケーションで、私のビュー・ページの1つでjavascriptを使用して、サブミット・サブミットを無効にしたサブミット・ボタンを作成しています。そして私は次のコード行を使ってこれを成功させました。

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

正常です。

今、私はそのサブミットボタンをホバリングしているときにもカーソルを「許可されていません」としたいと思います。私は送信ボタン無効を作ることと同様に「-許されない」として、カーソルを作るために次のコード行を使用している理由は、

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

だが、残念ながらボタンは無効になります。カーソルのスタイリングに変更はありません。

なぜこれが起こっているのかを教えて、これを理解する手がかりを教えてください。

ありがとうございます！

Answer 1

var btn=document.getElementById('yourId'); 
 

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

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

Answer 2

追加/ CSSクラスを削除します。

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

注：カーソル：なし。 Firefox 3、Safari 5、およびChrome 5までサポートされていません。IEまたはOperaではサポートされていません。画像URLカーソルはOperaでサポートされていません。 IEやOperaではサポートされていません：not-allowed、no-drop、vertical-text、all-scroll、col-resize、row-resize

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

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>