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

我会在您关注的六个按钮中添加一个类，以便您可以按该类选择它们;我将其称为counted。

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

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

如果由于某种原因您不想添加课程，并且如果按钮确实包含您已列出的id，则可以使用attribute starts with选择器并not过滤掉#btn-save7：

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

Answer 2

Hi CalculatingMachine，

在您的示例中，没有btn-save7，所以我决定创建一个。为避免与读者混淆，我将其重命名为Count Buttons。

首先选择具有禁用属性的按钮，例如button:disabled

接下来通过调用length属性来计算它们。

查看此代码段。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我会在您要检查的所有按钮上添加一个特定的类（以防您的网站上有更多按钮），例如：

<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类与disablced选择器一起使用：

$(".checkthis:disabled").length

这为您提供了“checkthis”类的禁用按钮数量如果禁用所有带有“checkthis”类的按钮，这将是一个简单的检查：

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

用JS获取禁用按钮的状态

3 个答案: