使用javascript更改标签颜色时出现问题

problems in changing label color with javascript

本文关键字:问题 颜色 标签 javascript 使用      更新时间:2023-09-26

我必须用javascript做一件非常基本的事情:表单字段由复选框触发;如果未选中复选框,则必须禁用该字段,并且其标签必须为灰色。

EDIT:这是从以下JSP代码生成的HTML代码(当然c:choot标记输出第二个条件):

    <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>

所以,这是我的代码:

    <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>

和脚本

<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>

使用此代码,当选中复选框时,字段会被正确激活(反之亦然),但文件不会更改其样式。我也尝试设置颜色属性,但没有结果。

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

我错过了什么?

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