Disabling Textbox upon Change of Drop Down List Index

 今天要來介紹一下,如何即時調整DropDownList的值並改變TextBox的屬性

javascript:

<script type="text/javascript">
    function DisableEnable() {
        var DropDown_Total = document.getElementById("<%= DropDown_Total.ClientID %>")
        var Textbox_Total = document.getElementById("<%= Textbox_Total.ClientID %>")
        var DropDown_Date = document.getElementById("<%= DropDown_Date.ClientID %>")
        var Textbox_Date = document.getElementById("<%= Textbox_Date.ClientID %>")

        if (DropDown_Total.options[DropDown_Total.selectedIndex].text == "Any Amount") {

            Textbox_Total.disabled = true;
        }

        else {
            Textbox_Total.disabled = false;
        }

        if (DropDown_Date.options[DropDown_Date.selectedIndex].text == "Any Date") {
            Textbox_Date.disabled = true;
        }

        else {
            Textbox_Date.disabled = false;
        }
    }
</script>

html:

<asp:TextBox runat="server" ID="Textbox_Total" />
<asp:TextBox runat="server" ID="Textbox_Date" />
<asp:DropDownList ID="DropDown_Total" runat="server" onchange="DisableEnable();">
    <asp:ListItem>Any Amount</asp:ListItem>
    <asp:ListItem>Exact Amount</asp:ListItem>
    <asp:ListItem>Below Amount</asp:ListItem>
    <asp:ListItem>Above Amount</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="DropDown_Date" runat="server" onchange="DisableEnable();">
    <asp:ListItem>Any Date</asp:ListItem>
    <asp:ListItem>Exact Date</asp:ListItem>
    <asp:ListItem>Before</asp:ListItem>
    <asp:ListItem>After</asp:ListItem>
</asp:DropDownList>

參考資料:http://b00.tw/Pfy6l