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

我会在您关心的六个按钮中添加一个 class，这样您就可以 select 它们 class；我将其命名为 counted.

然后在您的点击处理程序中，这是一个简单的 select 或与 :disabled select 或您链接的：

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

如果出于某种原因您不想添加 class，并且如果按钮确实有您列出的 id，您可以使用 attribute starts with select或者和not过滤掉#btn-save7:

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

Answer 2

嗨计算器，

在您的示例中，没有 btn-save7，因此我决定创建一个。为了避免给读者造成混淆，我将其重命名为 Count Buttons。

首先select像这样禁用属性的按钮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>

Answer 3

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

<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 class 与禁用的选择器一起使用：

$(".checkthis:disabled").length

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

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

使用 JS 获取禁用按钮的状态

getting the status of disabled buttons with JS

html

javascript

jquery

htmlbutton