2012-01-15 34 views
0

javascriptで非常に基本的なことをする必要があります。フォームフィールドはチェックボックスによってトリガーされます。チェックボックスがオフの場合、フィールドは無効にする必要があり、ラベルは灰色でなければなりません。javascriptでラベルの色を変更する際の問題

EDIT:は、ここでは、次のJSPコードから生成されたHTMLコードです(もちろんC:選択したタグは、第2の条件は出力):

<div class="form"> 
     <form:form id="myForm" name="myForm" method="post" action="settings" commandName="settings"> 
      <table> 
       <tr> 
        <td><form:label for="compatibilityMode" path="compatibilityMode">comp. mode</form:label></td> 
        <td><form:checkbox id="compatibilityMode" class="checkbox" path="compatibilityMode" name="compatibilityMode" onclick="toggle()"/> 
       </tr> 
       <tr> 
       <c:choose> 
        <c:when test="${settings.compatibilityMode}"> 
         <td><form:label id="localbaseurilabel" name="localbaseurilabel" class="labelenabled" for="localbaseuri" path="localApplicationBaseURI">local base URI</form:label></td> 
         <td><form:input id ="localbaseuri" class="text" path="localApplicationBaseURI" size="40" name="localbaseuri" disabled="false"/></td>       
        </c:when> 
        <c:otherwise> 
         <td><form:label id="localbaseurilabel" name="localbaseurilabel" class="labeldisabled" for="localbaseuri" path="localApplicationBaseURI">local base URI</form:label></td> 
         <td><form:input id ="localbaseuri" class="text" path="localApplicationBaseURI" size="40" name="localbaseuri" disabled="true"/></td> 
        </c:otherwise> 
       </c:choose>      
        <td><form:errors path="localApplicationBaseURI" cssClass="error"/></td> 
       </tr> 
      </table> 
      <div class="form-row"> 
       <input type="submit" value="submit"/> 
      </div> 
     </form:form> 
    </div> 
:だから

<div class="form"> 
     <form id="myForm" name="myForm" action="settings" method="post"> 
      <table> 
       <tr> 
        <td><label for="compatibilityMode">comp. mode</label></td> 
        <td><input id="compatibilityMode" name="compatibilityMode" onclick="toggle()" name="compatibilityMode" class="checkbox" type="checkbox" value="true"/><input type="hidden" name="_compatibilityMode" value="on"/> 
       </tr> 
       <tr>       
        <td><label for="localbaseuri" id="localbaseurilabel" name="localbaseurilabel" class="labeldisabled">local base URI</label></td> 
        <td><input id="localbaseuri" name="localApplicationBaseURI" name="localbaseuri" class="text" disabled="disabled" type="text" value="" size="40"/></td>           
        <td></td> 
       </tr> 
      </table> 
      <div class="form-row"> 
       <input type="submit" value="submit"/> 
      </div> 
     </form> 
    </div> 

は、ここに私のコードです

このコードでスクリプト

<script language="JavaScript"> 
function toggle() 
{ 
    if(document.myForm.compatibilityMode.checked == false) 
     { 
      document.myForm.localbaseuri.disabled = true; 
      document.myForm.localbaseurilabel.className = "labeldisabled"; 

     } 
    else 
     { 
      document.myForm.localbaseuri.disabled = false; 
      document.myForm.localbaseurilabel.className = "labelenabled"; 
     } 

} 
</script> 

チェックボックスがチェックされ、フィールドが適切にアクティブ化されます(およびその逆)が、フィールドのスタイルは変更されません。 私もcolor属性を設定しようとしましたが、結果はありませんでした。

document.myForm.localbaseurilabel.style.color = "grey"; 

何が欠けていますか?

+0

生成されたマークアップ - _browser_が表示するものを表示してください。ここでJSPコードはあまり役に立ちません。 –

+0

あなたのクイック返信をありがとう、私はあなたが尋ねたことをしました。 – MaVVamaldo

答えて

1
document.getElementById('localbaseurilabel').style.color = "grey"; 
+0

素晴らしい!できます!本当にありがとう!だから私の仕事を終わらせる方法を教えてもらえましたが、私の解決策が間違っていることを知りたいのです。 – MaVVamaldo

+0

@maVVamaldo、 '各フォームには、JavaScriptがフォーム内のすべての要素を配置する別の配列があります。最初の要素は要素[0]、2番目の要素[1]などです。すべて