我有一个页面,允许用户选择所需的时间表来运行任务。
用户可以选择多个时间表。 例如每日+每周
条件:
如果选中Weekly
复选框,则Select Day of Week
必须至少选择1天。
var divDay = document.getElementById("divSelectDay");
var execSch = document.getElementById("ddlExecutionSchedule");
var checkbox = execSch.getElementsByTagName("input");
var counter = 0;
for (var i = 0; i < checkbox.length; i++) {
if (checkbox[i].checked) {
if (checkbox[i].value == "Weekly")
divDay.style.display = 'block';
}
else {
if (checkbox[i].value == "Weekly") {
divDay.style.display = 'none';
}
}
}
function ShowCheckBox(ddlId) {
var ControlName = document.getElementById(ddlId.id);
var day = document.getElementById("divSelectDay");
if (ControlName.value == "Weekly")
{
day.style.display = 'block';
dat.style.display = 'none';
}
else {
day.style.display = 'none';
dat.style.display = 'none';
}
}
// Toggles Weekly (Day) execution schedule.
function ToggleExecutionSchedule(controlId) {
var frmControl = document.getElementById(controlId.id);
var divDay = document.getElementById("divSelectDay");
var checkbox = frmControl.getElementsByTagName("input");
var counter = 0;
for (var i = 0; i < checkbox.length; i++) {
if (checkbox[i].checked)
{
if (checkbox[i].value == "Weekly")
divDay.style.display = 'block';
}
else
{
if (checkbox[i].value == "Weekly") {
divDay.style.display = 'none';
}
}
}
}
在同一 .ascx 页面上,我有一个SAVE
按钮,用于验证页面输入:
function SaveGroupCheck() {
var isValid = true;
var haveError = false;
var schedule = document.getElementById("<%=ddlExecutionSchedule.ClientID%>").value;
if (schedule == "Weekly")
{
var xday = document.getElementById("<%=chkSelectDay.ClientID%>");
var checkbox = xday.getElementsByTagName("input");
var counter = 0;
for (var i = 0; i < checkbox.length; i++) {
if (checkbox[i].checked) {
counter++;
}
}
if (counter < 1) {
$("#chkSelectDay").addClass('errorbox');
$("#divSelectDay").addClass('has-error has-feedback');
$("#lblSelectDay").addClass('has-error has-feedback');
haveError = true;
}
else {
$("#chkSelectDay").removeClass('errorbox');
$("#divSelectDay").removeClass('has-error has-feedback');
$("#lblSelectDay").removeClass('has-error has-feedback');
}
}
if (!isValid || !haveError) {
document.getElementById("<%=txtCheckPostback.ClientID%>").value = "Save";
waitingDialog.show('Saving Changes...');
__doPostBack();
}
else {
waitingDialog.hide();
showErrorPopup("Please enter required information for all highlighted fields");
}
现在,我的SAVE
按钮允许用户在未选择Weekly
的情况下勾选Select Day of Week
时保存设置。
我可以知道我想念什么吗?谢谢您的宝贵时间。
HTML:
<div class="form-group" id="divExecutionSchedule">
<label class="control-label col-md-2" id="lblExecutionSchedule">Execution Schedule</label>
<div class="col-md-3">
<div class="input-group">
<asp:CheckboxList ID="ddlExecutionSchedule" ClientIDMode="Static" CssClass="chkLabel" runat="server" AutoPostBack="false" CellPadding="5" CellSpacing="5" RepeatDirection="Horizontal" RepeatLayout="Table" onchange="ToggleExecutionSchedule(this)" >
<asp:ListItem Text="Daily" Value="Daily"></asp:ListItem>
<asp:ListItem Text="Weekly" Value="Weekly"></asp:ListItem>
</asp:CheckboxList>
</div>
</div>
<label class="control-label col-md-2"></label>
<div class="col-md-10">
<div class="alert alert-danger hidden" role="alert" id="executionScheduleError"></div>
</div>
</div>
<div class="form-group" id="divSelectDay" >
<label class="control-label col-md-2" id="lblSelectDay">Select Day of Week</label>
<div class="col-md-3">
<div class="input-group">
<asp:CheckBoxList ID="chkSelectDay" CssClass="chkLabel" ClientIDMode="Static" runat="server" AutoPostBack="false" CellPadding="5" CellSpacing="5" RepeatDirection="Horizontal" RepeatLayout="Table">
<asp:ListItem Value="Monday">Mon</asp:ListItem>
<asp:ListItem Value="Tuesday">Tue</asp:ListItem>
<asp:ListItem Value="Wednesday">Wed</asp:ListItem>
<asp:ListItem Value="Thursday">Thu</asp:ListItem>
<asp:ListItem Value="Friday">Fri</asp:ListItem>
<asp:ListItem Value="Saturday">Sat</asp:ListItem>
<asp:ListItem Value="Sunday">Sun</asp:ListItem>
</asp:CheckBoxList>
</div>
</div>
<label class="control-label col-md-2"></label>
<div class="col-md-10">
<div class="alert alert-danger hidden" role="alert" id="selectDayError"></div>
</div>
</div>
<div class="text-right">
<button id="btnSave" class="btn btn-success btn-md" onclick="return preSave();"><span class="fa fa-floppy-o" aria-hidden="true"></span>Save</button>
</div>