gridviewwebform每行有多个复选框，但每行只允许选中一个

GridView WebForm having multiple checkboxes per row but only 1 per row is allowed to be checked

本文关键字：许选中 一个 复选框 gridviewwebform      更新时间：2023-09-26

我有代码，其中一个gridview在asp.net webforms吐出3个复选框，我想让Jquery轻松地遍历ID，只允许1复选框每行被选中。

它们总是有相同的名字，只是结束的数字会增加，因此第1行可能没有数字，但以1结尾，然后以2结尾，然后它们都以3结尾，等等…

我可以这样做，遗憾的是，我写了一大堆javascript/jquery，我检查每个特定的复选框和那些以1结尾的，那些不能有任何其他以1结尾的复选框，他们必须被选中

我正在考虑正则表达式，其中我检查ID的开头，然后检查ID的结尾，并使每个ID具有"chkCtrl"并以"1"等唯一数字结束，即选中的特定框将取消选中以1结尾的其他"chkCtrl"。因此Out1, Y1, N1

我确信有一个快速的方法来做到这一点，我只是似乎找不到一个例子。

例子
<table>
<tr>
    <td>Out</td>
    <td>Yes</td>
    <td>No</td>
</tr>
<tr>
    <td>
        <input id="MainContent_chkCtrlOut" type="checkbox" name="ctl00$MainContent$chkCtrl" />
    </td>
    <td>
        <input id="MainContent_chkCtrlY" type="checkbox" name="ctl00$MainContent$chkCtrl" />
    </td>
    <td>
        <input id="MainContent_chkCtrlN" type="checkbox" name="ctl00$MainContent$chkCtrl" />
    </td>
</tr>
 <tr>
    <td>
        <input id="MainContent_chkCtrlOut1" type="checkbox" name="ctl00$MainContent$chkCtrl" />
    </td>
    <td>
        <input id="MainContent_chkCtrlY1" type="checkbox" name="ctl00$MainContent$chkCtrl" />
    </td>
    <td>
        <input id="MainContent_chkCtrlN1" type="checkbox" name="ctl00$MainContent$chkCtrl" />
    </td>
</tr>

这可以通过编写几行jquery轻松完成。例如，请参阅下面的代码。

$('input:checkbox').click(function(){
    $(this).closest('tr').find('input:checkbox').removeProp('checked');
    $(this).prop('checked',true);
});

jsFiddle: https://jsfiddle.net/taleebanwar/a3qk0kc1/1/

编辑

正如Tom Stickel在评论中提到的，使用removeProp是一个坏主意。它可能无法在jquery 2.*中工作。参考Tom Stickel的答案，找到更好的方法。

选择的答案将在旧的jquery中工作，如果您将选择的答案jquery版本更改为新版本，则复选框不起作用

。removeProp是个坏主意https://api.jquery.com/removeProp/

Taleeb非常接近，但是，我建议编辑这一行。

$('input:checkbox').click(function () {
     $(this).closest('tr').find('input:checkbox').prop('checked', false);
     $(this).prop('checked', true);
});
相关文章：