Question

我正在尝试编码，每个ROW只能选择一个按钮。我尝试了太多这个，这是我最接近的。

我可以选择并取消选择它。但是每行只能选择一个。我的代码做了什么：

我可以选择任何按钮，它会添加一个类，它会变红。所以现在选择了这个按钮。我也可以不加选。

这是我的代码：

$('.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>

一些打印帮助：

Answer 1

你可以这样做。只需找到其他人.btn并从中删除.selected，并在选择data-selected时将false设置为.btn。希望这会对你有所帮助。

＆＃13;

$('.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');
    }
});

＆＃13;

.selected {
    color: red;
}

＆＃13;

<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>

＆＃13;

Answer 2

为什么不制作看起来像按钮的单选按钮，如果你给他们相同的名字，他们就会拥有你想要内置的功能。

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

我为你做了一个可以用于多行的工作示例：https://jsfiddle.net/448feo3j/

($costing_url)

每行只能单击一个按钮

3 个答案: