Question

我有一些代码，其中asp.net webforms中的gridview吐出3个复选框，我希望Jquery可以轻松遍历ID，并且每行只允许1个复选框。

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

我可以遗憾地编写大量的javascript / jquery，其中我检查每个特定的复选框以及以1结尾的那些，那些不能以1结尾的任何其他复选框，它们必须取消选中

我正在考虑正则表达式，我在其中检查ID的开头，然后检查ID的结尾，并理解每个ID有＆＃34; chkCtrl＆＃34;并以＆＃34; 1＆＃34;等唯一数字结尾被检查的特定框将取消选中另一个＆＃34; chkCtrl＆＃34;以1结尾。因此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，如果您将选定的答案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);
});

Answer 2

这可以通过编写几行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以获得更好的方法。

GridView WebForm每行有多个复选框，但每行只有1个复选框

2 个答案: