本篇直接使用JQuery來啟用或停用DropDownList，重點不使用ASP.NET的AJAX功能
前置作業：請先到JQuery官方網站下載jquery(我是使用v1.8.2)
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="./Scripts/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//小於%=RBL_bhours.UniqueID %大於 是ASP的寫法,會將RBL_bhours控制項的唯一識別印出(類似ID)
$('input[type="radio"][name="<%=RBL_bhours.UniqueID %>"]').change(function () {
var bhours = this.value;
//會先找到id="div1" 再 循序處理每個 select元素
$('#div1 select').each(function () {
if (bhours == 'true') {
$(this).removeAttr('disabled'); //移除disabled等於啟用select元素
} else {
$(this).attr('disabled', 'disabled'); //加入disabled等於停用select元素
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:RadioButtonList ID="RBL_bhours" runat="server"
RepeatDirection="Horizontal" RepeatLayout="Flow">
<asp:ListItem Value="true">開啟</asp:ListItem>
<asp:ListItem Value="false" Selected="True">關閉</asp:ListItem>
</asp:RadioButtonList>
<div id="div1">
每月
<asp:DropDownList ID="DDL_ts" runat="server" Width="45px" Enabled="false">
<asp:ListItem>01</asp:ListItem>
<asp:ListItem>02</asp:ListItem>
<asp:ListItem>03</asp:ListItem>
</asp:DropDownList>日
到
每月
<asp:DropDownList ID="DDL_te" runat="server" Width="45px" Enabled="false">
<asp:ListItem>01</asp:ListItem>
<asp:ListItem>02</asp:ListItem>
<asp:ListItem>03</asp:ListItem>
</asp:DropDownList>日
</div>
</form>
</body>
</html>
沒有留言:
張貼留言