Calculating Machine Calculating Machine - 5 months ago 10
jQuery Question

getting the status of disabled buttons with JS

I have 7 button on a webpage. When i click on btn7, I want to check how many buttons are disabled.

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


How can I check if all buttons are disabled?

Edit:

I have checked these links but these are advanced and I am not that good with 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

Hi CalculatingMachine,

In your example, there was no btn-save7, so I decided to create one. To avoid confusion to readers, I renamed it to Count Buttons.

First select the buttons with a disabled attribute like this button:disabled

Next count them by calling the length property.

Check out this snippet.

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