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

Question

我有代码，其中 asp.net webforms 中的 gridview 吐出 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>

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 在评论中提到的那样，使用 removeProp 是一个坏主意。它可能无法在 jquery 2.* 中工作。请参阅Tom Stickel's answer以获得更好的方法来做到这一点。