如何从使用Javascript的GridView中隐藏所选行的复选框？

Question

我在第一列与CheckBox一个GridView和Button上SecondLast列。当用户点击Button的current row的CheckBox必须使用Javascript是Invisible。

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" AllowPaging="true" 
    PageSize="100" AllowSorting="true" DataSourceID="sqlUsers" DataKeyNames="ttppcid" 
    Width="100%" OnRowCommand="GridView1_RowCommand" EmptyDataText="No Data Found" 
    OnPageIndexChanging="GridView1_PageIndexChanging" OnRowDataBound="GridView1_RowDataBound"> 
    <Columns> 
     <asp:TemplateField ItemStyle-Width="30px" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" Visible="true"> 
      <ItemTemplate> 
       <asp:CheckBox ID="chkSelect" runat="server" Height="30" class="mychk" rowid="<%# Container.DataItemIndex+1 %>" /> 
      </ItemTemplate> 
     </asp:TemplateField> 
//some more templates here 
     <asp:TemplateField HeaderText="" ItemStyle-Width="70px" ItemStyle-HorizontalAlign="Center" 
      HeaderStyle-HorizontalAlign="Center"> 
      <ItemTemplate> 
       <asp:Button ID="BtnSource" runat="server" Text="Source" rowid="<%# Container.DataItemIndex+1 %>" 
        class="showButton" OnClick='<%# "return SetRowValues("+Eval("ttppcid")+",this.id,"+Eval("Fair")+","+Eval("Good")+","+Eval("Mint")+","+Eval("Poor")+","+Eval("Fair")+")"%>' /> 
      </ItemTemplate> 
     </asp:TemplateField> 
    </Columns> 
</asp:GridView> 

的Javascript：

function SetRowValues(id, controlid, fair, good, mint, nnew, poor, broken) { 
    var rowid = $("#" + controlid).attr("rowid"); 
    var chkBoxID; 
    var chkRowid; 
    $('.mychk').css("display", "block"); 

    $('.mychk').each(function() { 

     chkBoxID = this.id; 
     alert(chkBoxID); 
     chkRowid = $("#" + chkBoxID).attr("rowid"); 
     alert(chkBoxID + " ROW :" + chkRowid); 


     if (chkRowid == rowid) { 
      $("#" + chkBoxID).css("display", "none"); 
     } 
     else { 
      $("#" + chkBoxID).css("display", "block"); 

     } 
    }); 
return false; 
} 

所有工作正常，只是在这里alert我得到空。没能拿到CheckBox控件的ID

也试图与：

<script type="text/javascript"> 
    $(document).ready(function() { 
    $(function() { 
     $(".showButton").on("click", function() { 
      alert(".showButton clicked"); 
      $(this).closest("tr").find(":checkbox").hide(); 
     }); 
    }); 
    }); 
</script> 

渲染复选框：

<td align="center" style="width: 30px; display: block;"> 
    <span class="mychk" rowid="1" style="display: block; height: 30px;"><input id="ctl00_ContentPlaceHolder1_GridView1_ctl02_chkSelect" type="checkbox" name="ctl00$ContentPlaceHolder1$GridView1$ctl02$chkSelect"></span> 
</td> 

渲染巴顿在排位：

<td align="center" style="width: 70px; display: block;"> 
<input type="submit" name="ctl00$ContentPlaceHolder1$GridView1$ctl03$BtnSource" value="Source" onclick="return SetRowValues(6,this.id,222.0000,222.0000,222.0000,222.0000,222.0000);WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$ContentPlaceHolder1$GridView1$ctl03$BtnSource&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" id="ctl00_ContentPlaceHolder1_GridView1_ctl03_BtnSource" class="showButton" rowid="1" style=""> 
</td> 

任何想法？

帮助赞赏！

Answer 1

这里是我的完整的解决方案：

function SetRowValues(id, controlid, fair, good, mint, nnew, poor, broken) { 
var rowid = $("#" + controlid).attr("rowid"); 
var chkBoxID; 
var chkRowid; 
$('span.mychk').each(function() { 
chkBoxID = $(this).attr('id'); 
    chkRowid = $(this).attr('rowid'); 
    if (chkRowid == rowid) { 
     $(this).hide(); 
     $(this).closest("td").css("border","none"); 
    } 
    else { 
     $(this).show(); 
     $(this).closest("td").css("border", "1px solid grey"); 
    } 
}); 
return false; 
} 

感谢所有..！ :)

Answer 2

首先要做到这一点没有回发，改变ASP-按钮，输入类型=按钮或HTML的按钮：

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" AllowPaging="true" 
    PageSize="100" AllowSorting="true" DataSourceID="sqlUsers" DataKeyNames="ttppcid" 
    Width="100%" OnRowCommand="GridView1_RowCommand" EmptyDataText="No Data Found" 
    OnPageIndexChanging="GridView1_PageIndexChanging" OnRowDataBound="GridView1_RowDataBound"> 
    <Columns> 
     <asp:TemplateField ItemStyle-Width="30px" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" Visible="true"> 
      <ItemTemplate> 
       <asp:CheckBox ID="chkSelect" runat="server" Height="30" class="mychk" rowid="<%# Container.DataItemIndex+1 %>" /> 
      </ItemTemplate> 
     </asp:TemplateField> 
//some more templates here 
     <asp:TemplateField HeaderText="" ItemStyle-Width="70px" ItemStyle-HorizontalAlign="Center" 
      HeaderStyle-HorizontalAlign="Center"> 
      <ItemTemplate> 
       <input type="button" class="showButton" value="Source"/> 
      </ItemTemplate> 
     </asp:TemplateField> 
    </Columns> 
</asp:GridView> 

，然后使用一个这样的脚本以隐藏的复选框。你不需要复选框此的ID，只要找出父行和隐藏复选框：

$(function() { 
    $(".showButton").on("click", function() { 
      $(this).closest("tr").find(":checkbox").hide(); 
    }); 
}); 

Answer 3

尝试用下面：

var result = $('#<%=GridView1.ClientID %> tr td input[id*="chkSelect"][type=checkbox]:checked').map(function() { 

    return $(this).closest('tr').find('td').eq(2).text(); 

    }).get().join();