2011-10-17 14 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()イベントにサブスクライブすることができ、その後、2つの入力フィールドに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は動作することが保証されています:-) –