получение статуса отключенных кнопок с помощью 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> 

Как я могу проверить, если все кнопки отключены?

Edit:

Я проверил эти ссылки, но они продвинулись, и я не так хорошо с 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.

Сначала выберите кнопки с атрибутом инвалидов, как этот 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 2

Я хотел бы добавить класс к шести кнопок, которые вам небезразличны, так что вы можете выбрать их к этому классу; Я назову его counted.

Затем в обработчик щелчка, это простой селектор с помощью переключателя :disabled вы связаны между собой:

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

Если по каким-то причинам вы не хотите, чтобы добавить класс, и если кнопки действительно есть id s вы в списке, вы могли бы использовать attribute starts with селектор и not отфильтровывать #btn-save7:

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

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"); 
}