CODEWITHSUNDEEP
javascripthtmljquery
Roxx
Roxx

Reputation: 3986

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?

Upvotes: 0

Views: 99

Answers (3)

vanilla thunder
vanilla thunder

Reputation: 627

i would add a particular class to all the buttons you want to check (just in case you have more buttons on your site), e.g:

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

and then using this css class with disablced selector:

$(".checkthis:disabled").length

this gives you the amount of disabled buttons with class "checkthis" and this would be a simple check if all buttons with class "checkthis" are disabled or not:

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

Upvotes: 1

Richard Hamilton
Richard Hamilton

Reputation: 26444

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>

Upvotes: 3

T.J. Crowder
T.J. Crowder

Reputation: 1074385

I would add a class to the six buttons that you care about so you can select them by that class; I'll call it counted.

Then in your click handler, it's a simple selector with the :disabled selector you linked:

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

If for some reason you don't want to add the class, and if the buttons really do have the ids you've listed, you could use an attribute starts with selector and not to filter out #btn-save7:

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

Upvotes: 3

Related Questions