JSで無効なボタンの状態を取得

Question

私はウェブページ上に7つのボタンがあります。私がbtn7をクリックすると、無効にされているボタンの数を確認したい。

<button type="submit" class="btn btn-home" name= "btn-save1" id= "btn-save1" required="required">Save</button> 
<button type="submit" class="btn btn-home" name= "btn-save2" id= "btn-save2" required="required">Save</button> 
<button type="submit" class="btn btn-home" name= "btn-save3" id= "btn-save3" required="required">Save</button> 
<button type="submit" class="btn btn-home" name= "btn-save4" id= "btn-save4" required="required">Save</button> 
<button type="submit" class="btn btn-home" name= "btn-save5" id= "btn-save5" required="required">Save</button> 
<button type="submit" class="btn btn-home" name= "btn-save6" id= "btn-save6" required="required">Save</button> 

すべてのボタンが無効になっている場合JS

<script type="text/javascript"> 
$('document').ready(function() 
{ 
       $(document).on('click', '#btn-save7', function(e){ 
       alert('test'); 
}) 
}); 
</script> 

はどうすれば確認できますか？

編集：

私はこれらのリンクをチェックしてきたが、これらは進んでいると私はjQueryを使って良いことはないです。 JQuery select all elements without disabled AND no readonly?

http://api.jquery.com/disabled-selector/

jQuery: Checking for disabled attribute and adding/removing it?

Answer 1

こんにちはCalculatingMachine、

あなたの例では、btn-save7はありませんでしたので、私は作成することにしました。読者に混乱を避けるために、私はCount Buttonsに名前を変更しました。

まずlengthプロパティを呼び出すことによって、それらを数えるこのbutton:disabled

次のような無効な属性を持つボタンを選択します。

このスニペットをご覧ください。

$("#btn-save7").on("click", function() { 
 
    $("#num-buttons").html($("button:disabled").length + " buttons are disabled"); 
 
});

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

 
<button type="submit" class="btn btn-home" name= "btn-save1" id= "btn-save1" required="required">Save</button> 
 
<button type="submit" class="btn btn-home" name= "btn-save2" id= "btn-save2" disabled required="required">Save</button> 
 
<button type="submit" class="btn btn-home" name= "btn-save3" id= "btn-save3" required="required">Save</button> 
 
<button type="submit" class="btn btn-home" name= "btn-save4" id= "btn-save4" required="required">Save</button> 
 
<button type="submit" class="btn btn-home" name= "btn-save5" id= "btn-save5" required="required">Save</button> 
 
<button type="submit" class="btn btn-home" name= "btn-save6" id= "btn-save6" required="required">Save</button> 
 

 
<button type="submit" class="btn btn-home" name= "btn-save7" id= "btn-save7" required="required">Count Buttons</button> 
 

 
<p id="num-buttons"></p>

Answer 2

あなたは、そのクラスでそれらを選択することができますので、私はあなたが気に6つのボタンにクラスを追加します。私はそれをcountedと呼ぶでしょう。あなたがクラスを追加したくない何らかの理由場合は、ボタンが実際に持っている場合

var disabledCount = $(".counted:disabled").length; 

：

は、その後、あなたのクリックハンドラで、それはあなたがリンクされ:disabledセレクタを持つ単純なセレクタですid sのあなたがリストされてきた、あなたは#btn-save7をフィルタリングするattribute starts withセレクタとnotを使用することができます。

var disabledCount = $("button[id^='btn-save']:disabled").not("#btn-save7").length; 

Answer 3

私はあなたが、（念のため、あなたのサイト上でより多くのボタンを持っている）電子をチェックしたいすべてのボタンに特定のクラスを追加します。G：

<button class="btn btn-home checkthis" name= "btn-save1" ...></button> 
<button class="btn btn-home checkthis" name= "btn-save2" ...></button> 
<button class="btn btn-home checkthis" name= "btn-save3" ...></button> 
... 

、その後disablcedセレクタと、このCSSクラスを使用して：

$(".checkthis:disabled").length 

これはあなたの クラス「checkthis」と無効ボタンの量を与え、これはすべてのボタンかの簡単なチェックになりますクラス「checkthis」で無効になっているかではない。

if($(".checkthis:disabled").length == $(".checkthis").length) { 
    console.log("all buttons are disabled"); 
}