Question

I have a gridview with a column of asp buttons that I toggle the text using javascript as follws:

function btnBuyToggle(objRef) 
{ 
    var row = objRef.parentNode.parentNode;
    var rowIndex = row.rowIndex;
    if (objRef.value == "ADD")
    {
        objRef.value = "REMOVE";
        $("#" + objRef.id).parent().parent().css("color", "#800080").css("font-style", "italic").css("background-color", "#F5FA61");
    } 
    else 
    {
      objRef.value = "ADD";
    }
}

Now I have added another gridview column of hidden checkboxes which I want to use for passing the toggled button instances back to the code behind on another button click event. So, what I need to do is modify the above script (JQuery is fine) to set the checkbox on the same row being toggled (checked for ADD button text values, and unchecked for the REMOVE button text values.

Here are my gridview fields:

<asp:TemplateField HeaderText="Prior <br /> Downld" HeaderStyle-ForeColor="White" > 
    <ItemTemplate >
       <asp:Button id="btnBuy" runat="server" OnClientClick="btnBuyToggle(this); return false;"
             Text="ADD" CssClass="buyButton" Visible="true" />
     </ItemTemplate>
    <HeaderStyle Width="7%" />
    <ItemStyle CssClass="sessionOrderDownloadItems" VerticalAlign="Middle" HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField HeaderStyle-Width="0px" >
    <ItemTemplate>
        <asp:CheckBox Visible="False" Enabled="false" ID="buyCheckBoxHidden" runat="server"
             Checked='<%# Eval("SORD_SelectedForPurchaseFlag") %>' />
    </ItemTemplate>
    <HeaderStyle Width="0px" />
</asp:TemplateField>

Thank you,
Jim

Here is my attempted fixed script:

      function btnBuyToggle(objRef) 
          { 
            var $btn = $("#" + objRef.id);

            if (objRef.value == "ADD")
            {
                objRef.value = "REMOVE";
                $btn.closest('.myClass').prop("checked", true);
                $btn.parent().parent().css("color", "#800080").css("font-style", "italic").css("background-color", "#F5FA61");
            } else {
                objRef.value = "ADD";
                $btn.closest('.myClass').prop("checked", false);
                $btn.parent().parent().css("background-color", "#FFFFFF").css("color", "#191970").css("font-style", "normal");
            }
        }

And my modified checkbox markup:

<asp:TemplateField HeaderStyle-Width="0px" >
   <ItemTemplate>
     <asp:CheckBox style="display:block;" ID="buyCheckBoxHidden" runat="server" CssClass="myClass" Checked="false" />
   </ItemTemplate>
   <HeaderStyle Width="0px" />
</asp:TemplateField>

Thank you,
Jim

Answer 1

Your first issue is that you have your checkbox set as visible="false". When you do this, the checkbox will not be visible to javascript. You need to change it be display:none. Secondly, you can use the jquery closest() method to grab the closest checkbox. To make this easier you should probably add a class to your checbox. Once you have found the checkbox, you can use the jquery prop() method to set the checked property to true or false.

HTML:

<asp:CheckBox runat="server" ID="buyCheckBoxHidden" Checked='<%# Eval("SORD_SelectedForPurchaseFlag") %>' style="display:none;" CssClass="class" />

Javascript:

function btnBuyToggle(objRef) 
{
    var $row = $(objRef).closest('tr');

    if (objRef.value == "ADD")
    {
        objRef.value = "REMOVE";
        $row.find('.myClass').prop("checked", true);
        // OR $row.find('input[type=checkbox]').prop("checked", true);
        $row.css("color", "#800080").css("font-style", "italic").css("background-color", "#F5FA61");
    } else {
        objRef.value = "ADD";
        $row.find('.myClass').prop("checked", false);
        // OR $row.find('input[type=checkbox]').prop("checked", false);
        $row.css("background-color", "#FFFFFF").css("color", "#191970").css("font-style", "normal");
    }
}​

Here is an example jsfiddle.

Edit:

By the way jquery prop() is the recommended way of changing property values for jquery versions 1.6 and later. If you are using an earlier version of jquery, you will need to use the attr() method.

Edit:

Since it seems that the ASP.Net controls are removing your classes. FYI, ASP.Net controls have preset skins that can be found in your App_Themes folder and the theme you are using. Within the specific theme there is usually a Default.skin file that specifies what classes are on your controls by default. ASP.Net could possibly be removing your class when it creates the checkbox. You should search for the class that is added by ASP.net if you dont need to have your own class.