0

我在网页上有 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

我会为您关心的六个按钮添加一个类，以便您可以按该类选择它们；我会打电话counted的。

然后在您的点击处理程序中，它是一个简单的选择器，其中包含:disabled您链接的选择器：

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

如果由于某种原因您不想添加类，并且按钮确实具有id您列出的 s，则可以使用以selector开头的属性not并过滤掉#btn-save7：

var disabledCount = $("button[id^='btn-save']:disabled").not("#btn-save7").length;
于 2016-06-18T15:59:19.907 回答
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 回答
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 回答