2009-08-21 64 views
2

另一個jQuery noob問題 - 我做錯了什麼?jQuery與ASP.NET WebForms - 禁用文本框

我有ASP.NET呈現一些HTML標記3.5 web表單,看起來像這樣:

<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類稱爲「文本框」的普通文本框和「textboxDisabled」的文本框的禁用狀態,在外部引用的CSS文件,工作OK (當用於服務器端代碼,這是)

我想在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); 
      } 
     }); 
    }); 

它工作正常的標籤和單選按鈕 - 但我不能讓它使用文本框的工作 - 他們只是保持不變周圍的一切,沒有什麼更改(它們不會被禁用,並且它們也不會更改其外觀以表明它們已被禁用)。

我不明白這一點 - 我看到幾個(幾比樣品更多)文本框,這是在HTML <input type="text">,他們確實有class="rcPromo"class="textbox"他們 - 那麼,爲什麼不找的jQuery並更新這些?

任何想法?

馬克

回答

1

我想不出一種方法來增加從皮膚文件中分配給控件的css類名稱(phoenix是正確的,類名稱需要添加到相同的屬性中)。

我雖然可以想一些變通辦法:

- >你可以用你想要禁用的文本框在一個給定的類股利:

<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); 
+0

謝謝 - 我會看到它的最佳方法我 – 2009-08-21 11:26:21

+0

感謝您的提示 - 我可能會與特定的字符串去Postfix爲我的文本框顯然使它們脫穎而出,聽起來像它應該工作! – 2009-08-21 20:56:55

+0

僅供參考,玩了更多的獲取渲染文本框中的類屬性包含兩個類名稱您可以覆蓋文本框的CssClass屬性OnPreRenderComplete事件,因爲那時它已經包含了.skin文件中類的名稱,因此:txtDiscountUntil.CssClass = txtDiscountUntil.CssClass +「rcPromo」; – staterium 2009-08-24 07:44:32

1

你的HTML標記不正確的。

您不能在代碼中添加兩個類。

兩個類可以添加這樣

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

,而不是像

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

你爲什麼不使用hasClass檢查元素是否具有此類設置或不?

我想你必須在兩個類的OR條件中給出這個。

+0

麻煩是 - 我不能真的改變這一點。我的「皮膚」文件定義的所有元素‘的CssClass =文本框’,並 – 2009-08-21 07:35:46

+0

是的,如果我明確指定的文本框(使用我無法刪除(否則我們的應用程序不會看它現在的樣子) $(「#<%= textbox.ClientID%>」),我的jQuery很好地工作 – 2009-08-21 07:52:14