Only ONE button can be clicked per row

Question

I'm trying to code that only ONE button can be selected per ROW. I tried too many this and this is the closest I did it.

I can selected and deselect it. But only one per row can be selected. What my code does:

I can select any button and it will be added a class to it get red. so now this button is selected. I can unselect it as well.

This is my code:

$('.btn').click(function(){
        if ($(this).attr('data-selected') === 'true') {
            $(this).attr('data-selected', 'false');
            $(this).removeClass('selected');
        }else {
            $(this).attr('data-selected', 'true');
            $(this).addClass('selected');
        }
    });

<style>
   .selected {
       color:red;
   }
</style>

Some print to help:

Answer 1

You can do it like following. Just find the others .btn and remove .selected from them and set data-selected to false when you are selecting a .btn . Hope this will help you.

 $('.btn').click(function () { if ($(this).attr('data-selected') === 'true') { $(this).attr('data-selected', 'false'); $(this).removeClass('selected'); } else { $(this).closest('tr').find('.btn').not(this) .removeClass('selected').attr('data-selected', 'false'); $(this).attr('data-selected', 'true'); $(this).addClass('selected'); } }); 

 .selected { color: red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td>1</td> <td>2</td> <td><input type="button" value="1.22" class="btn"/></td> <td><input type="button" value="1.33" class="btn" /></td> <td><input type="button" value="1.44" class="btn" /></td> </tr> <tr> <td>1</td> <td>2</td> <td><input type="button" value="1.22" class="btn" /></td> <td><input type="button" value="1.33" class="btn" /></td> <td><input type="button" value="1.44" class="btn" /></td> </tr> </table> 

Answer 2

Why not just make radio buttons that looks like buttons, if you give them the same name they will already have the functionality you are looking for built in.

http://jsfiddle.net/DIRTY_SMITH/YB8UW/616/

    <ul class="donate-now">
<li>
    <input type="radio" id="a25" name="amount" />
    <label for="a25">$25</label>
</li>
<li>
    <input type="radio" id="a50" name="amount" />
    <label for="a50">$50</label>
</li>
<li>
    <input type="radio" id="a75" name="amount" checked="checked" />
    <label for="a75">$75</label>
</li>
<li>
    <input type="radio" id="a100" name="amount" />
    <label for="a100">$100</label>
</li>

</ul>
<br>
<ul class="donate-now">
<li>
    <input type="radio" id="b25" name="amountb" />
    <label for="b25">$25</label>
</li>
<li>
    <input type="radio" id="b50" name="amountb" />
    <label for="b50">$50</label>
</li>
<li>
    <input type="radio" id="b75" name="amountb" checked="checked" />
    <label for="b75">$75</label>
</li>
<li>
    <input type="radio" id="b100" name="amountb" />
    <label for="b100">$100</label>
</li>

</ul>

Answer 3

I made a working example for you which can be used for multiple rows: https://jsfiddle.net/448feo3j/

$('.button-default').click(function() {
    $(this).parents('tr').find('.button-default').removeClass('button-clicked').attr('data-selected', false);
    $(this).addClass('button-clicked').attr('data-selected', true);
});