2

另一个 jQuery 菜鸟问题 - 我做错了什么？

我有一些由 ASP.NET 3.5 网络表单呈现的 HTML 标记，如下所示：

<input id="ctl01_cphContent_pnlBasicInfo_chkRC" 
       type="checkbox" name="ctl01$cphContent$pnlBasicInfo$chkRC" />
<label for="ctl01_cphContent_cntPromos_pnlBasicInfo_chkRC">Recurrent Charges</label>

<span id="ctl01_cphContent_cntPromos_pnlBasicInfo_lblPromoValidFor" 
      class="rcPromo">Validity:</span>

<span class="rcPromo">
   <input id="ctl01_cphContent_pnlBasicInfo_rbnDiscountValidFor" 
          type="radio" name="ctl01$cphContent$pnlBasicInfo$discountValidFor" 
          value="rbnDiscountValidFor" checked="checked" />
   <label for="ctl01_cphContent_cntPromos_pnlBasicInfo_rbnDiscountValidFor">valid for</label>
</span>
<span class="rcPromo">
   <input id="ctl01_cphContent_pnlBasicInfo_rbnDiscountValidUntil" 
          type="radio" name="ctl01$cphContent$pnlBasicInfo$discountValidFor" 
          value="rbnDiscountValidUntil" />
   <label for="ctl01_cphContent_cntPromos_pnlBasicInfo_rbnDiscountValidUntil">valid until</label>
</span>

<input name="ctl01$cphContent$pnlBasicInfo$txtDiscountMonths" type="text"
       id="ctl01_cphContent_pnlBasicInfo_txtDiscountMonths" 
       class="textbox" class="rcPromo" originalValue="" style="width:30px;" />
<span id="ctl01_cphContent_cntPromos_pnlBasicInfo_lblMonths" class="rcPromo"></span>

<input name="ctl01$cphContent$pnlBasicInfo$txtDiscountUntil" type="text" 
       id="ctl01_cphContent_pnlBasicInfo_txtDiscountUntil" 
       class="textbox" class="rcPromo" originalValue="" style="width:150px;" />
  • 我有一个选中的“chkRC”，我想捕获并使用它来启用/禁用其他 UI 控件
  • 我有许多标签、输入（type=radio）和输入（type=text）UI 控件。这些都标有“rcPromo”虚拟 CSS 类
  • 在外部引用的 CSS 文件中，我有一个用于普通文本框的 CSS 类，称为“textbox”，用于文本框的禁用状态的“textboxDisabled”，可以正常工作（即在服务器端代码中使用时）

我想在 jQuery 中完成的是：当禁用“chkRC”复选框时，我想禁用所有相关的 UI 控件。

我的 jQuery 看起来像这样：

    $(document).ready(function() {
        $("#<%= chkRC.ClientID %>").click(function() {
            $('.rcPromo > :label').toggleClass('dimmed');

            if (this.checked) {
                $('.rcPromo').removeAttr('disabled');
                $('.rcPromo .textboxDisabled').addClass('textbox').removeClass('textboxDisabled');
            }
            else {
                $('.rcPromo > :input').removeAttr('checked');
                $('.rcPromo .textbox').addClass('textboxDisabled').removeClass('textbox');
                $('.rcPromo').attr('disabled', true);
            }
        });
    });

它适用于标签和单选按钮 - 但我无法让它与文本框一起使用 - 它们始终保持不变，没有任何变化（它们不会被禁用，也不会改变它们的外观表示它们也被禁用）。

我不明白这一点——我确实看到了几个（比示例中的多一些）文本框，它们是<input type="text">HTML 格式的，它们确实有class="rcPromo"and class="textbox"——那么为什么 jQuery 不找到并更新它们呢？

有任何想法吗？

马克

4

2 回答 2

1

您的 HTML 标记不正确。

您不能在代码中添加两个类。

可以像这样添加两个类

<input type="text" class="Class1 Class2" />

不喜欢

<input type="text" class="Class1" class="Class2" />

为什么不使用hasClass来检查元素是否设置了此类？

我认为你必须在两个类的 OR 条件下给出这个。

于 2009-08-21T07:32:52.860 回答
1

我想不出一种方法来增加从皮肤文件中分配给控件的css类名（凤凰是正确的，类名需要添加到相同的属性中）。

不过，我可以想到一些解决方法：

--> 你可以将所有你想禁用的文本框包装在一个给定类的 div 中：

<div class="disable_textbox"><asp:textbox id="".../></div>

然后通过选择禁用它们：

$('.disable_textbox input').attr('disabled', true);

--> 您可以在要禁用的文本框的 ID 中包含字符串：

<asp:textbox id="txtDiscountUntil_DisableMe" ... />

然后像这样禁用它们：

$("input[id*='DisableMe']").attr('disabled', true);

--> 您可以向文本框添加自定义属性：

txtDiscountUntil.Attributes.Add("disableme", "true");

然后像这样禁用它们：

$("input[disableme='true']").attr('disabled', true);
于 2009-08-21T10:51:55.157 回答