GridView WebForm 每行有多个复选框，但每行只允许检查 1 个

Question

我有代码，其中 asp.net webforms 中的 gridview 吐出 3 个复选框，我想让 Jquery 轻松遍历 ID，并且只允许检查每行 1 个复选框。

它们将始终具有相同的名称，只是结尾数字会增加，因此第 1 行可能没有数字，然后以 1 结尾，然后以 2 结尾，然后它们都以 3 结尾等等...

我可以在编写大量 javascript/jquery 的过程中完成这一令人遗憾的漫长过程.

我正在考虑正则表达式，其中我检查 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>

Answer 1

这可以通过编写几行 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 在 cmets 中提到的那样，使用 removeProp 是一个坏主意。它可能不适用于 jquery 2.*。请参阅Tom Stickel's answer 了解更好的方法。

Answer 2

所选答案将在较旧的 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);
});