How to Find a CheckBox inside a Class and Hide the CheckBox using JQuery?

Question

I have a Grid view in which their is a CheckBox in first column. Now, i want to Hide a CheckBox of selected Row. I have tried with the following to Hide CheckBox but it wont work.

<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;
}

AlsoTRied With:

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

Rendered Markup:

Rendered CheckBox:

<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>

**Rendered Button in Grid:**
<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>

NOTE: I want to hide the CheckBox where 'rowid' of Button matches with the 'rowid' of a CheckBox.

You have already asked this question and it has already been answered, please don't repost same question. Use the original question and tell why the solution there does not work for you. stackoverflow.com/questions/21458044/… — Esko
– Esko, Commented Jan 31, 2014 at 7:24

SHEKHAR SHETE · Accepted Answer · 2014-01-31 08:58:48Z

0

Here is my Solution:

 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;
}

edited Jan 31, 2014 at 8:58

answered Jan 31, 2014 at 8:53

SHEKHAR SHETE

6,08215 gold badges89 silver badges144 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to Find a CheckBox inside a Class and Hide the CheckBox using JQuery?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related