1

我有一个带有一列 asp 按钮的 gridview，我使用 javascript 来切换文本，如下所示：

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

现在，我添加了另一个隐藏复选框的 gridview 列，我想用它来将切换按钮实例传递回另一个按钮单击事件后面的代码。所以，我需要做的是修改上面的脚本（JQuery 很好）以在被切换的同一行上设置复选框（选中 ADD 按钮文本值，并取消选中 REMOVE 按钮文本值。

这是我的gridview字段：

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

谢谢你，吉姆

这是我尝试的固定脚本：

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

我修改过的复选框标记：

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

谢谢你，吉姆

4

1 回答 1

0

您的第一个问题是您的复选框设置为visible="false". 执行此操作时，javascript 将看不到该复选框。你需要改变它display:none。其次，您可以使用 jquery nearest()方法来获取最近的复选框。为了使这更容易，您可能应该在您的复选框中添加一个类。找到复选框后，您可以使用 jquery prop()方法将选中的属性设置为 true 或 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");
    }
}​

这是一个示例jsfiddle。

编辑：

顺便说一句，jquery prop()是更改 jquery 1.6 及更高版本的属性值的推荐方法。如果您使用的是较早版本的 jquery，则需要使用attr()方法。

编辑：

因为似乎 ASP.Net 控件正在删除您的类。仅供参考，ASP.Net 控件具有预设皮肤，可以在您的 App_Themes 文件夹和您使用的主题中找到。在特定主题中，通常有一个 Default.skin 文件，它指定默认情况下控件上的类。ASP.Net 在创建复选框时可能会删除您的类。如果你不需要自己的类，你应该搜索 ASP.net 添加的类。

于 2012-05-08T00:55:45.223 回答