Check if button is disabled - Javascript

Asked

Viewed 2,478 times

3

I have this button, and I need to check with Javascript that it’s disabled, but I don’t know how to do it. Here’s HTML:

<button type="button" title="Finalizar Compra" class="btn btn-proceed-checkout btn-checkout no-checkout" disabled="disabled">
    <span>Finalizar Compra</span>
</button>

Are you seeing the disabled="disabled"? So how do I check this?

What I’ve done is: 

var b = document.getElementsByClassName("btn btn-proceed-checkout btn-checkout no-checkout");

if(b == ???) { //Aqui que não sei o que fazer ???
    alert("Pedido minimo de: R$: 1250,00");
}
javascript html

2 answers

5


Notes that the method getElementsByClassName returns a collection, so to grab only the button, you can grab the first item in the collection or use an alternative such as getElementById, already with the element, to check if it is disabled or not, just check the attribute (disabled):

var b = document.getElementsByClassName("btn btn-proceed-checkout btn-checkout no-checkout")[0];

if (b.disabled) { //Aqui que não sei o que fazer ???
  alert("Pedido minimo de: R$: 1250,00");
}
<button type="button" title="Finalizar Compra" class="btn btn-proceed-checkout btn-checkout no-checkout" disabled="disabled">
<span><span>Finalizar Compra</span></span>
</button>

  • Can you explain something to me please? I program in PHP, but in Javascript I am beginner, I know almost nothing at all. But anyway, the . (point) Javascript is the same thing as PHP -> (arrow)?

  • 2

    @Lucascarvalho I am not the right person to answer about PHP, but as far as I know, are equivalent yes.

  • Okay, thanks, but can you explain just one more thing? For example, you said collection. In this case, he sees how many items have that class on the page and then organizes from 0 to let’s assume 10 for example. It has 10 buttons with the test class, it will arrange from 0 to 10 on the page and will sort of form an array?

  • @Lucascarvalho Exactly this, returns a collection of all elements with the specified class, organizing them by index, starting at 0, p/ know how many elements returned, the collection has the property .length.

  • 1

    Thanks, Mathias! Great day for you! Abs;

3

If you need to seek one specific element (either by tag, class, id, data Attributes, etc) use document.querySelector(). It makes more sense than making use of this getElementsByClassName.

var button = document.querySelector('.btn.btn-proceed-checkout');

if(button.disabled)
  console.log('Está desabilitado.');
<button type="button" title="Finalizar Compra" class="btn btn-proceed-checkout btn-checkout no-checkout" disabled="disabled">
    <span>Finalizar Compra</span>
</button>

I could take it in other ways too, for example:

// Pelo título.
var button = document.querySelector('button[title="Finalizar Compra"]');

// Pelo atributo 'disabled'.
var button = document.querySelector('button[disabled]');

// Tendo atributo disabled e título específico.
var button = document.querySelector('button[disabled][title="Finalizar Compra"');

// Tendo todas as classes do seu botão.
var button = document.querySelector('.btn.btn-proceed-checkout.btn-checkout.no-checkout');

If you need to get a collection of elements, use document.querySelectorAll().

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.