CODEWITHSUNDEEP
javascriptjquerybootstrap-4
nicer00ster
nicer00ster

Reputation: 63

Making a button disabled if 'this' class is true

I'm working on this app that allows you to add people from an API to a list in the app. Every time a person is added, a new Bootstrap card is created. I'm trying to figure out how to make the button to click "Watch Stream" disabled under certain circumstances. If the user is "LIVE" then the class .popover_status_on is added to the parent element. If the user is "OFFLINE" then the class .popover_status_off is added instead.

I thought this was going to be a quick fix issue but I'm seeming to have much more trouble with it than I expected. Right now this is what I'm looking at with my code that isn't working which I definitely thought it would have:

if($('.card > .card-body > h2').hasClass('popover_status_off')) {
        $('.card > .card-body > button').prop('disabled', true);
      } else {
        return;
      }

I realize that when it gets disabled, it disables all the buttons, even "LIVE" ones. So I'm trying to figure out if there's a way without specifying by class/id that I can have it change the state of the button. I thought maybe using "this" would work but I'm unsure what code would work for that.

Thanks for any feedback.

Upvotes: 0

Views: 94

Answers (1)

Beck Johnson
Beck Johnson

Reputation: 1210

The problem is that inside your if statement, the jQuery selector isn't constrained to THAT card, it's finding all buttons inside all cards.

What your code literally says:

If there is card containing an h2 with class popover_status_off
    Then find all cards that have buttons and disable them
Else do nothing

Try this:

 $('.card h2.popover_status_off').parents('.card').find('button').prop('disabled', true);

You don't need the if statement. One of the great powers of jQuery is that you can identify an element and change it all in a single statement.

Upvotes: 2

Related Questions