ASP.NET-设置复选框的CssClass

Question

以下代码

((CheckBox)e.Row.FindControl("exportCb")).CssClass = "enabledExport";

创建html

<span class="enabledExport"><input id="_ctl0_ContentPlaceHolder1_gridviewName__ctl2_exportCb" type="checkbox" name="_ctl0:ContentPlaceHolder1:gridviewName:_ctl2:exportCb" /></span>

对于asp.net网格视图列

<asp:TemplateField HeaderText="Export">
                        <ItemTemplate>
                            <asp:CheckBox runat="server" ID="exportCb"/>        
                        </ItemTemplate>
                        <ItemStyle/>
                    </asp:TemplateField>

我需要使用jquery

$('.enabledExport').toggle()

选中/取消选中（作为切换）复选框。因为CssClass标记在<span>上，所以代码将尝试切换<span>而不是<input>。我该怎么解决这个问题？

我不介意这个解决方案是在jquery还是在asp.net方面，只要它有效。如果代码只是像它应该的那样标记输入，我会很高兴…

Answer 1

如果你试图显示/隐藏复选框，你可以这样做：

$('.enabledExport input:checkbox').toggle()

但我认为你想做的是：

var $checkbox = $('.enabledExport input:checkbox');
$checkbox.attr("checked", !$checkbox.is(":checked"));

Answer 2

最简单的解决方案是以这样的方式设计jQuery选择器，即它将选择作为类"enabledExport"的span的子项的复选框。在这种情况下，它看起来像：

jQuery('.enabledCheckbox > :checkbox').toggle()

或

jQuery(':checkbox', '.enabledCheckbox').toggle()

Answer 3

您需要使用正确的cssclass并在其前面加一个点。所以你已经选择了你的跨度。然后进入该范围并选中复选框。这是为了绑定点击事件：

$(".enabledExport").click(function(){
  var box = $(this).children(":checkbox");
  box.is(":checked") ? box.removeAttr("checked") : box.attr("checked", "checked");
});

这是点击：

$(".enabledExport").click();

Answer 4

我使用的是MasterSite页面，因此复选框元素id将获得添加到复选框id中的ContentPlaceHolder信息。当页面加载时，我将分配一个自定义属性来帮助查找元素（也可以使用foreach语句来完成）。下面是自定义属性代码：

protected void Page_Load（对象发送方，EventArgs e）

｛

  if (!IsPostBack)
   {
      chkTxa.Attributes.Add("clientID", "chkTxa");
      chkTxx.Attributes.Add("clientID", "chkTxx");
   }

}

我的两个复选框ID是：chkTxa和chkTxx。我将AutoPostBack设置为"False"，因为我希望客户端负责复选框的切换。由于复选框位于html表中，浏览器将复选框包装在标记中。这需要您做额外的工作来查找复选框。jQuery的代码是这样的：

$（document）.ready（function（）｛

    var chkTxa;
    var chkTxx;
    // dig into the <span> object to find the checkbox
    chkTxa = $("[clientID=chkTxa]").children(":checkbox");
    chkTxx = $("[clientID=chkTxx]").children(":checkbox");
    $(chkTxa).click(function () {
        if (!chkTxa.is(":checked")) {
            chkTxa.removeAttr("checked");
        }
        else {
            chkTxx.removeAttr("checked");
        }
    });
   $(chkTxx).click(function () {
        if (!chkTxx.is(":checked")) {
            chkTxx.removeAttr("checked");
        }
        else {
            chkTxa.removeAttr("checked");
        }
    });
});

希望有人觉得这很有用。

Allen

Answer 5

$(".enabledExport+input").toggle()应该能做到这一点。