Previous button deactivates when clicked on next

Asked

Viewed 46 times

1

I have two buttons that are created according to what comes from the api:

  <div class="col-2">                     
      <button type="button" class="btn btn-success button-ok botOk" value="${element.NUMOS}" id="${element.COD_PROD}" onClick="sim(this);">SIM</button>                     
  </div>

  <div class="col-2">
     <button type="button" class="btn btn-danger button-ok" value="${element.NUMOS}" id="${element.COD_PROD}" onClick="cance(this);">NÃO</button>
  </div>

<div class="col">
     <p class="prod">${element.PRODUTO}</p>
</div>

COD_PROD are the same in the YES and NO buttons.

The end user has to click yes or no, and as I get the data from the api, this ${element.PRODUTO} can came more than 1, so I did with a foreach for it to create another div with the buttons and product name automatically.

Only when I click yes on a product, and I will click yes on the other, the button disables the previous clicked and only the current one is clicked.

Can someone help me?

Code that changes status: 

 $('button').click(function () {
                  var clicado = $(this); //captura o botao clicado
                  $('button').removeClass('ativo') // remove a classe dos demais botoes
                  clicado.addClass('ativo');// adiciona a classe ao botao alvo                
                })
javascript html jquery

  • could post your code that changes the status of buttons?

  • @Alvaroalves ready, I asked the question

  • "Only when I click yes on one product, and I will click yes on the other, the button deactivates the previous clicked and only the current one is clicked."... your problem is on this line: $('button').removeClass('ativo') // remove a classe dos demais botoes

  • Yeah, but I’ve tried a lot of other ways and I can’t fix that

  • 1

    let’s see if I understand: 1 - You click ok on a button, it adds the 'active' class; 2 - You click ok on another button the previous one should be with the "active"

  • is that it? in case click on it removes the 'active' class only from the current product?

  • exactly that!!!

  • Let’s go continue this discussion in chat.

Show 3 more comments

1 answer

2


When he calls that line:

$('button').removeClass('ativo') // remove a classe dos demais botoes

It disables everyone, I imagine the intention is to remove the "YES" if you click on the "NO" of the same product. If all that html block you put in the question for a product is inside an html tag that encompasses each product, you can do...

clicado.parent().parent().find('button').removeClass('ativo') // remove a classe dos demais botoes

I made a fiddle to demonstrate!

  • When you click the other one not removing the previous one, you have YES and NOT active

  • I updated, but using the line I mentioned here works

Browser other questions tagged javascript html jquery

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