Changing button function via jQuery

Question

I have some buttons that at the click of it directs to a request in ajax to an external file that adds a product, however this does not matter much in this case. I manipulate these buttons, being that every time the button with the span buy, where at the click of the same, the span is changed to remove and when the remove button is clicked the span is changed again to buy. I need that every time the buy button is clicked, all of them are disabled for the click less the button that is with the span remove, so that this being clicked, the span be changed to buy and the other buttons can already be clicked again.

Button code:

<button type="button" class="button btn-cart" onclick="addCartao('<?php echo $_product->getId(); ?>')" name="cartaoMensagem<?php echo $_product->getId(); ?>" id="cartaoMensagem"><span><span>Comprar</span></span></button>

Code of the Ajax request:

function addCartao(product_id){
                $j.ajax({
                  type: "POST",
                  url: "teste.php",
                  data: {
                    product_id: product_id
                  },
                  dataType: 'json',
                  cache : false,
                  beforeSend: function () {

                  },
                  success: function (retorno) {
                    var button = $j('button[name=cartaoMensagem' + product_id + ']');

                    if($j(button).text() == '<span><span>Comprar</span></span>'){
                        $j('#cartao').find(':button').attr('disabled',true);
                        $j(button).html('<span>Remover</span>');
                    }else{
                        $j(button).html('<span>Comprar</span>');
                    }
                  },
                  complete: function () {

                  },
                  error: function (x,y,z) {
                    alert("error");
                    alert(x);
                    alert(y);
                    alert(z);
                  }
              });
            }

Note: The code I made disables all buttons that are inside the card div, which are those that are in question, but as they are disabled, at the click of the button that is with the span remove, same does no kind of action.

Answer 1

In this case you need to move to the function which was the button clicked, then delete it from the list of buttons to be disabled.

Below is an example of logic:

function addCartao(product_id, botaoClicado){

  if($(botaoClicado).text() == 'Comprar'){
    $('#cartao').find(':button').not(botaoClicado).attr('disabled',true);
    $(botaoClicado).html('<span>Remover</span>');
  }else{
    $('#cartao').find(':button').attr('disabled',false);
    $(botaoClicado).html('<span>Comprar</span>');
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cartao">
<button type="button" class="button btn-cart" onclick="addCartao('1', this)" name="cartaoMensagem1" id="cartaoMensagem"><span><span>Comprar</span></span></button>
<button type="button" class="button btn-cart" onclick="addCartao('2', this)" name="cartaoMensagem2" id="cartaoMensagem"><span><span>Comprar</span></span></button>
<button type="button" class="button btn-cart" onclick="addCartao('3', this)" name="cartaoMensagem3" id="cartaoMensagem"><span><span>Comprar</span></span></button>
</div>

Answer 2

I understood your purpose in the other question (including putting the full answer there).

First, assign a id different for each button (the id must be unique in the document). You can do so:

id="cartaoMensagem<?php echo $_product->getId(); ?>"

And with that code on :success you will get the expected result:

i = $j("#cartaoMensagem"+product_id);
i.text() == "Comprar" ?
( i.html(i.html().replace("Comprar","Remover")), $j("#cartao button").not(i).attr('disabled','disabled') )
:
( i.html(i.html().replace("Remover","Comprar")), $j("#cartao button").removeAttr('disabled') );

If using the above code, remove the code below your :success:

var button = $j('button[name=cartaoMensagem' + product_id + ']');

                    if($j(button).text() == '<span><span>Comprar</span></span>'){
                        $j('#cartao').find(':button').attr('disabled',true);
                        $j(button).html('<span>Remover</span>');
                    }else{
                        $j(button).html('<span>Comprar</span>');
                    }

Include a function in the IF/ELSE:

No if:

i.text() == "Comprar" ?
    ( i.html(i.html().replace("Comprar","Remover")), $j("#cartao button").not(i).attr('disabled','disabled'), funcao() )
    :
    ( i.html(i.html().replace("Remover","Comprar")), $j("#cartao button").removeAttr('disabled') );

No ELSE:

i.text() == "Comprar" ?
    ( i.html(i.html().replace("Comprar","Remover")), $j("#cartao button").not(i).attr('disabled','disabled') )
    :
    ( i.html(i.html().replace("Remover","Comprar")), $j("#cartao button").removeAttr('disabled'), funcao() );