EnableInputWhenChooseTheLastOption

时间：2014-08-24 23:42:43 阅读：342 评论：0 收藏：0 [点我收藏+]
标签：style blog color os io for ar art div
<!DOCTYPE html>
<html>
<head>
<script>
function checkCustom() {
    if (document.getElementById(‘dropDownSelectionID‘).selectedIndex == (document.getElementById(‘dropDownSelectionID‘).length - 1))
    {
        document.getElementById(‘dateFromLabel‘).className="";
        document.getElementById(‘dateFrom‘).disabled=false;
        document.getElementById(‘dateFrom‘).className="entry";
        document.getElementById(‘dateFrom‘).style.backgroundColor="#ffffff";
        document.getElementById(‘dateToLabel‘).className="";
        document.getElementById(‘dateTo‘).disabled=false;
        document.getElementById(‘dateTo‘).className="entry";
        document.getElementById(‘dateTo‘).style.backgroundColor="#ffffff";
        document.getElementById(‘dateFromNote‘).className="";
        document.getElementById(‘dateToNote‘).className="";
    } else {
        document.getElementById(‘dateFromLabel‘).className="disabledLabelText";
        document.getElementById(‘dateFrom‘).disabled=true;
        document.getElementById(‘dateFrom‘).value="";
        document.getElementById(‘dateFrom‘).className="entryDisabled";
        document.getElementById(‘dateFrom‘).style.backgroundColor="#cccccc";
        document.getElementById(‘dateToLabel‘).className="disabledLabelText";
        document.getElementById(‘dateTo‘).disabled=true;
        document.getElementById(‘dateTo‘).value="";
        document.getElementById(‘dateTo‘).className="entryDisabled";
        document.getElementById(‘dateTo‘).style.backgroundColor="#cccccc";
        document.getElementById(‘dateFromNote‘).className="disabledLabelText";
        document.getElementById(‘dateToNote‘).className="disabledLabelText";
    }
}
</script>
<style>
body {
    background-color: pink;
    margin-top:100px;
}
.entryListHeader, .entryListBorder {
    margin:auto;
}
.entryListBorder {
    border-bottom-style:solid;
    border-bottom-color:#666666;
    border-bottom-width:1px;
    border-top-style:solid;
    border-top-color:#666666;
    border-top-width:1px;
    border-left-style:solid;
    border-left-color:#666666;
    border-left-width:1px;
    border-right-style:solid;
    border-right-color:#666666;
    border-right-width:1px;
}
.disabledLabelText {
    color:#bbbbbb;
}
.ofxTableHeader {
    /*The font-family property can hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.*/
    font-family:verdana,arial,sans-serif; 
    font-size:11px;
    font-weight:bold;
    color:#000000;
    margin-bottom:0px !important;
}
input.continueButton {
    font-family:verdana,arial,sans-serif; font-size:11px; font-weight:400;
}
td, th {
    font-family:verdana,arial,sans-serif; font-size:11px;
}
.entryListLabel {
    font-family:verdana,arial,sans-serif;
    font-size:11px;
    font-weight:700;
    color:#666666;
    text-align:right;
}
.dropdown {
    font-family:verdana,arial,sans-serif;
    font-size:12px;
    font-weight:400; /*400 is the same as normal, 700 is the same as bold*/
    color:#000000;
}
</style>

</head>

<body>

<table class="entryListHeader">
    <tr>
        <td><h3 class="ofxTableHeader">Select Time Period or Date Range</h3></td>
    </tr>
</table>

<table class="entryListBorder">
    <tr>
        <td class="entryListLabel"><label for="dropDownSelectionID">Time Period</label></td>
        <td>
            <select id="dropDownSelectionID" class="dropdown" onchange="checkCustom()">
            <option value="30_days_ago" selected>30 days</option>
            <option value="60_days_ago">60 days</option>
            <option value="90_days_ago">90 days</option>
            <option value="year_to_date">Year to Date</option>
            <option value="last_1st_quarter">4th Quarter 2013</option>
            <option value="last_2st_quarter">3th Quarter 2013</option>
            <option value="last_3st_quarter">2th Quarter 2013</option>
            <option value="last_4st_quarter">1th Quarter 2013</option>
            <option value="last_5st_quarter">4th Quarter 2012</option>
            <option value="custom_date_range">Custom Date Range</option>
        </td>
        <td class="entryListLabel">
            <label for="dateFrom">
                <span id="dateFromLabel" class="disabledLabelText">From</span>
            </label>
        </td>
        <td style="padding-bottom:0px">
            <input type="text" id="dateFrom" size="10" value="" style="background-color:#cccccc" disabled=true>
        </td>
        <td class="entryListLabel">
            <label for="dateTo">
                <span id="dateToLabel" class="disabledLabelText">To</span>
            </label>
        </td>
        <td style="padding-bottom:0px">
            <input type="text" id="dateTo" size="10" value="" style="background-color:#cccccc" disabled=true>
        </td>
    </tr>
    <tr>
        <td colspan="3"></td>
        <td valign="top" align="left" style="padding-top:0px"><span id="dateFromNote" class="disabledLabelText">(mm/dd/yy)</span></td>
        <td></td>
        <td valign="top" align="left" style="padding-top:0px"><span id="dateToNote" class="disabledLabelText">(mm/dd/yy)</span></td>
    </tr>
    <tr>
        <td colspan=6 align="center">
            <input type="submit" value="Get History" class="continueButton" style="width:110px" onClick="submitFromTimeSelection();">
        </td>
    </tr>
</table>

</body>
</html>
标签：style blog color os io for ar art div
原文地址：http://www.cnblogs.com/ccks/p/3933635.html
踩
(0)
评论一句话评论（0）
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行