以下代码禁用并启用div(它禁用两个文本框)。我面临的问题是我无法禁用日历弹出窗口(单击日历图像时会弹出窗口)。我仍然可以与它互动。
的JavaScript
function(){
var btnEnableDisable = document.getElementById('enable-disable');
var divTwoTextBoxDiv = document.getElementsByClassName('two-text-box-div');
btnEnableDisable.onclick = function(){
if(btnEnableDisable.value=='Disable'){
btnEnableDisable.value = 'Enable';
enableDisableDiv(true)
}else{
btnEnableDisable.value = 'Disable';
enbaleDisableDiv(false)
}
}
var enbaleDisableDiv = function(boolVal){
for(var key in divTwoTextBoxDiv){
divTwoTextBoxDiv[key].disabled = boolVal;
}
}
}
HTML
<div class="two-text-box-div" id="div2" >
<table>
<tr>
<td>
<asp:Label ID="lblStartDate" runat="server" Text="Start Date"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtStartDate" runat="server" ></asp:TextBox>
<asp:HyperLink ID="hypCalenStart" runat="server" ImageUrl="~/images/ico-cal.gif" ></asp:HyperLink>
<ajax:CalendarExtender ID="StartDatePicker" runat="server" PopupButtonID="hypCalenStart" TargetControlID="txtStartDate" SelectedDate='<%# Datetime.Today() %>' Format="MM/dd/yyyy">
</ajax:CalendarExtender>
</td>
<td>
<asp:Label ID="lblEndDate" runat="server" Text="End Date"></asp:Label>
</td>
<td>
<asp:TextBox ID="txtEndDate" runat="server" ></asp:TextBox>
<asp:HyperLink ID="hypCalenEnd" runat="server" ImageUrl="~/images/ico-cal.gif" ></asp:HyperLink>
<ajax:CalendarExtender ID="EndDatePicker" runat="server" PopupButtonID="hypCalenEnd" TargetControlID="txtEndDate" SelectedDate="<%# Datetime.Today() %>" Format="MM/dd/yyyy">
</ajax:CalendarExtender>
</td>
<td colspan=2 align="center">
<asp:Button ID="enable" class="enable-disable-textbox" OnClientClick="validate(1);" runat="server" Text="Enable" />
</td>
</tr>
</table>
</div>
<input type="button" value="Disable" id="enable-disable"/>
其他所有人都被禁用了。