0

Webページに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は、無効にして読み取り専用なしですべての要素を選択しますか?

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

jQuery:無効な属性を確認して追加/削除しますか?

4

3 に答える 3

3

計算機さん、こんにちは。

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

まず、このように属性が無効になっているボタンを選択しますbutton:disabled

次に、lengthプロパティを呼び出してカウントします。

このスニペットをチェックしてください。

$("#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>

于 2016-06-18T16:00:26.230 に答える
3

気になる 6 つのボタンにクラスを追加して、そのクラスで選択できるようにします。私はそれを呼びますcounted。

次に、クリック ハンドラーでは、:disabledリンクしたセレクターを含む単純なセレクターです。

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

何らかの理由でクラスを追加したくない場合、およびリストしたids がボタンに実際にある場合は、セレクターで始まる属性notを使用して、フィルターで除外でき#btn-save7ます。

var disabledCount = $("button[id^='btn-save']:disabled").not("#btn-save7").length;
于 2016-06-18T15:59:19.907 に答える
1

チェックしたいすべてのボタンに特定のクラスを追加します（サイトにさらにボタンがある場合に備えて）、たとえば：

<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>
...

そして、無効なセレクターでこの css クラスを使用します。

$(".checkthis:disabled").length

これにより、クラス「checkthis」を持つ無効なボタンの量が得られます。これは、クラス「checkthis」を持つすべてのボタンが無効になっているかどうかを簡単に確認できます。

if( $(".checkthis:disabled").length == $(".checkthis").length ) {
   console.log("all buttons are disabled");
}
于 2016-06-18T16:06:40.780 に答える