2011-10-17 54 views
0

我是一個JavaScript/jQuery初學者。ASP.NET MVC灰色字段複選框= true

我試圖灰化,禁用和更改單擊複選框時的文本框的背景顏色。我在實施可能的在線解決方案時遇到了困難。

下面有我的工作代碼:

<% using (Html.BeginForm()) { %> 
    <span id="errorMsg"> 
     <%:(ViewData["ErrorMessage"])%> 
    </span> 
    <div> 
     <fieldset> 
      <legend>Account Information</legend> 

      <div class="editor-label"> 
       <%: Html.LabelFor(m => m.UserName) %> 
      </div> 
      <div id="UserName" class="editor-field"> 
       <%: Html.TextBoxFor(m => m.UserName) %> 
       <%: Html.ValidationMessageFor(m => m.UserName) %> 
      </div> 

      <div id "Password" class="editor-label"> 
       <%: Html.LabelFor(m => m.Password) %> 
      </div> 
      <div class="editor-field"> 
       <%: Html.PasswordFor(m => m.Password) %> 
       <%: Html.ValidationMessageFor(m => m.Password) %> 
      </div> 
      <div id="checkBox" class="editor-field"> 
       <%: Html.CheckBoxFor(m => m.UseNetworkCreds %> Use Network Credentials 
       <%: Html.ValidationMessageFor(m => m.UseNetworkCreds)%> 
      </div> 


      <p> 
       <input type="submit" value="Log On" /> 
      </p> 

     </fieldset> 
    </div> 
<% } %> 

如何修改這個代碼做什麼,我提到?我希望複選框灰掉/禁用用戶名和密碼文本框。

回答

3

在代碼中,你是與/迄今爲止寫過我看不到任何JavaScript。要達到您在問題中描述的目標,您需要編寫一些JavaScript代碼。例如,你可以認購.change()事件的複選框,然後切換在兩個輸入字段,東西長的線readonly屬性:

$(function() { 
    $('#UseNetworkCreds').change(function() { 
     if ($(this).is(':checked')) { 
      $('#UserName, #Password').attr('readonly', 'readonly'); 
     } else { 
      $('#UserName, #Password').removeAttr('readonly'); 
     } 
    }); 
}); 
+0

難道僅CSS的解決方案是可能的? – bzlm

+0

@bzlm,不是我所知道的。至少它可能是靜態的。但我認爲切換複選框時它不會起作用。但我不是一個設計師。也許有一些CSS3巫術可以做到這一點。誰知道?另一方面,傳統的JavaScript保證工作:-) –