Yvonne_163.com 发表于 2013-1-29 08:35:13

多个radio的选项设置

<%@ page language="java" pageEncoding="UTF-8"
contentType="text/html; charset=UTF-8"%>
<%@ include file="/pages/inc/taglibs.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>新增调度</title>
<style type="text/css">
.barContentTitle {
margin: 1px;
height: 28px;
background-color: #D8D8D8;
*width: 100%;
}
</style>
<%@ include file="/pages/inc/header.jsp"%>
</head>
<body>
<%@ include file="/pages/inc/common.jsp"%>
<div id="container" class="main">
<div class="barTitle">
<div class="content">
<a href="javascript:;" ></a> <span>新增调度</span>
</div>
</div>
<hr class="barTitleHr"></hr>
<form id="taskTriggerForm" action="<c:url value='/taskTrigger/save'/>"
method="post">
<div class="barContentTitle">
<div class="content">
<span>基本信息</span>
</div>
</div>
<div class="clear">
<table class="table">
<tr>
<td class="inputLabelTd">调度名称：</td>
<td class="inputTd"><input id="triggerName"
name="triggerName" type="text" class="text"
value="<c:out value='${taskTrigger.triggerName}'/>" /></td>
<td class="inputLabelTd">调度分组：</td>
<td class="inputTd"><input id="triggerGroup"
name="triggerGroup" type="text" class="text"
value="<c:out value='${taskTrigger.triggerGroup}'/>" /></td>
</tr>
<tr>
<td class="inputLabelTd">对应任务名称：</td>
<td class="inputTd"><select id="taskName" name="taskName"
type="select" class="text"
value="<c:out value='${taskScheduler.taskName}'/>" /></td>
<td class="inputLabelTd">生效日期：</td>
<td class="inputTd"><input id="beginDate" name="beginDate"
type="text" class="Wdate"
value="<c:out value='${taskTrigger.beginDate}'/>" /></td>
</tr>
<tr>
<td class="inputLabelTd">截止日期：</td>
<td class="inputTd"><input id="deadline" name="deadline"
type="text" class="Wdate"
value="<c:out value='${taskTrigger.deadline}'/>" /></td>
<td class="inputLabelTd"></td>
<td class="inputTd"></div>
</tr>
</table>
</div>
<div class="barContentTitle">
<div class="content">
<span>发生频率</span>
</div>
</div>
<div class="clear">
<table class="table">
<tr>
<td class="inputLabelTd"><input id="r1" type="radio"
name="triggerPeriod" value="dayly" checked/>每天</td>
<td class="inputTd">每  <input id="dayInterval"
type="text" name="dayInterval" size="5"
value="<c:out value='${taskTrigger.dayInterval}'/>"> 
天
</td>
<td class="inputTd"> </td>
<td class="inputTd"> </td>
<td></td>
</tr>
<tr>
<td class="inputLabelTd"><input id="r2" type="radio"
name="triggerPeriod" value="weekly" />每周</td>
<td class="inputTd">每  <input id="weekInterval"
type="text" name="weekInterval" size="5" disabled="true"
value="<c:out value='${taskTrigger.weekInterval}'/>"> 
周
</td>
<td class="inputTd">发生在：</td>
<td class="inputTd"><div id="wdate" name="whatDay"
disabled="true"></div></td>
<td></td>
</tr>
<tr>
<td class="inputLabelTd"><input id="r3" type="radio"
name="triggerPeriod" value="monthly" />每月</td>
<td class="inputTd">每  <input id="monthInterval"
type="text" name="monthInterval" size="5" disabled="true"
value="<c:out value='${taskTrigger.monthInterval}'/>"> 
月

</td>
<td class="inputTd">发生在：</td>
<td class="inputTd"><div id="t1">
<input id="day1" type="radio" name="detailDay" value="0"
disabled="true">第  <input id="someday"
name="someday" type="text" class="text" disabled="true"
value="<c:out value='${taskTrigger.someday}'/>" />  天 <br />
<input id="day2" type="radio" name="detailDay" value="1"
disabled="true">第  <input id="quarter"
name="weekInMonth" type="text" class="text" disabled="true"
value="<c:out value='${taskTrigger.weekInMonth}'/>" /> 
个  <input id="week" name="DOWIM" type="text" class="text"
disabled="true" value="<c:out value='${taskTrigger.DOWIM}'/>" />
</div></td>
</tr>
</table>

</div>
<div class="barContentTitle">
<div class="content">
<span>每日频率</span>
</div>
</div>
<div class="clear">
<table class="table">
<tr>
<td class="inputLabelTd"><input id="frequency1" type="radio"
name="frequency" value="0" checked/>执行时间：</td>
<td class="inputTd"><input id="executeTime"
name="executeTime"
value="<c:out value='${taskTrigger.executeTime}'/>" type="text"
class="Wdate" /></td>
</tr>
<tr>
<td class="inputLabelTd"><input id="frequency2" type="radio"
name="frequency" value="1" />发生周期：</td>
<td class="inputTd">每隔 <input id="HMInterval"
name="HMInterval" type="text" size="5" value="<c:out value='${taskTrigger.HMInterval}'/>"/> <select id="unit"
name="unit" class="select" ></select>    起始于 <input
id="runTime" name="runTime" type="text"
value="<c:out value='${taskTrigger.runTime}'/>" class="Wdate" />
<!-- <input type="text" name="hours" size=5>时
<input type="text" name="minute" size=5>分 -->    
截止于 <input id="endTime" name="endTime" type="text"
value="<c:out value='${taskTrigger.endTime}'/>" class="Wdate" />
</td>
</tr>
</table>
</div>
<div class="barContentTitle">
<div class="content">
<span>设置</span>
</div>
</div>
<div class="clear">
<table class="table">
<tr>
<td class="inputLabelTd">最多延迟时间：</td>
<td class="inputTd"><select id="maxDelayTime"
name="maxDelayTime" class="select"></select></td>
<td class="inputLabelTd">最大运行时间：</td>
<td class="inputTd" colspan="3"><select id="maxExecuteTime"
name="maxExecuteTime" class="select"></select></td>
</tr>
</table>
</div>
<table class="table foottable">
<tfoot class="footTd">
<tr>
<td class="inputTd">
<button id="submit_button" type="button" >保存</button>  
<!-- <button id="reset_button" type="reset">重置</button>   -->
<button id="back_button" type="button"
/taskTrigger"/>'">取消</button>
</td>
</tr>
</tfoot>
</table>
</form>
</div>
<div id="errorDialog"></div>
<%@ include file="/pages/inc/footer.jsp"%>
</body>
</html>
<script type="text/javascript">
new biz.button({
id : "#submit_button",
icons : {
primary : 'ui-icon-disk'
}
});
/* new biz.button({id:"#reset_button", icons: {primary:'ui-icon-refresh'}}); */
new biz.button({
id : "#back_button",
icons : {
primary : 'ui-icon-arrowthick-1-w'
}
});
$(function() {
$("#taskName").combobox({
url : "<c:url value='/taskTrigger/getAllTaskName'/>"
});
})
function save(button) {
form = button.form;
if (!biz.validate("valid", form)) {
showWarn("<fmt:message key='validation.object'/>", 3000);
return;
}
//截止日期与生效日期的比较
var start_date = $("#beginDate").val();
var close_date = $("#deadline").val();
if (start_date != "" && close_date != "") {
var sdate = start_date.toString();
var sYear = sdate.substring(0, 4);
var sMon = sdate.substring(5, 7);
var sDay = sdate.substring(8, 10);
var cdate = close_date.toString();
var cYear = cdate.substring(0, 4);
var cMon = cdate.substring(5, 7);
var cDay = cdate.substring(8, 10);
var start = new Date(sYear, sMon, sDay);
var end = new Date(cYear, cMon, cDay);
var gap = parseInt(end - start) / (1000 * 60 * 60 * 24);
if (gap < 0) {
alert("截止日期必须大于生效日期 !");
return false;
}
}
if($("#taskName").val() == ""){
alert("请选择对应的任务！");
return false;
}

var val=$('input:radio:checked').val();
if (val =="weekly"){
if(jQuery("input:checked").length == 0){
alert("请选择星期几！");
return false;
}
}
if (val =="monthly"){
var someday =document.getElementById("someday").value;
var week =document.getElementById("week").value;
if(someday == "" && week== ""){
alert("请选择具体哪一天！");
return false;
}
}
var executeTime = document.getElementById("executeTime").value;
var runTime = document.getElementById("runTime").value;
var endTime = document.getElementById("endTime").value;
if (executeTime == "" && runTime == "") {
alert("请输入执行时间！");
return false;
}
if (executeTime == null || executeTime == "") {
form.submit(runTime, endTime);
}
if (runTime == null || runTime == "") {
form.submit(executeTime);
}
}
//taskTriggerForm表单内容的验证
new biz.validate({
id : "#taskTriggerForm",
rules : {
triggerName : {
required : true
},
triggerGroup : {
required : true
},
dayInterval : {
rangelength : [ 0, 3 ],
digits : true
},
weekInterval : {
rangelength : [ 0, 2 ],
digits : true
},
monthInterval : {
rangelength : [ 0, 2 ],
digits : true
},
HMInterval : {
rangelength : [ 0, 2 ],
max : 59,
digits : true
}
}
});

new biz.select({
id : "#maxDelayTime",
data : [ {
'name' : '30秒',
'value' : '30s'
}, {
'name' : '1分钟',
'value' : '1 minute'
}, {
'name' : '3分钟',
'value' : '3 minutes'
}, {
'name' : '5分钟',
'value' : '5 minutes'
}, {
'name' : '10分钟',
'value' : '10 minutes'
}, {
'name' : '15分钟',
'value' : '15 minutes'
}, {
'name' : '30分钟',
'value' : '30 minutes'
}, {
'name' : '1小时',
'value' : '1 hour'
}, {
'name' : '2小时',
'value' : '2 hours'
}, {
'name' : '3小时',
'value' : '3 hours'
}, {
'name' : '5小时',
'value' : '5 hours'
}, {
'name' : '8小时',
'value' : '8 hours'
}, {
'name' : '10小时',
'value' : '10 hours'
}, {
'name' : '15小时',
'value' : '15 hours'
}, {
'name' : '20小时',
'value' : '20 hours'
}, {
'name' : '1天',
'value' : '1 day'
} ],
value : "<c:out value='${taskTrigger.maxDelayTime}'/>"
});
new biz.select({
id : "#maxExecuteTime",
data : [ {
'name' : '30分钟',
'value' : '30 minutes'
}, {
'name' : '1小时',
'value' : '1 hour'
}, {
'name' : '3小时',
'value' : '3 hours'
}, {
'name' : '8小时',
'value' : '8 hours'
}, {
'name' : '12小时',
'value' : '12 hours'
}, {
'name' : '1天',
'value' : '1 day'
}, {
'name' : '2天',
'value' : '2 day'
}, {
'name' : '3天',
'value' : '3 day'
} ],
value : "<c:out value='${taskTrigger.maxExecuteTime}'/>"
});
new biz.checkbox({
id : "#wdate",
data : [ {
'label' : '周一',
'name' : 'whatDay',
'value' : '2'
}, {
'label' : '周二',
'name' : 'whatDay',
'value' : '3'
}, {
'label' : '周三',
'name' : 'whatDay',
'value' : '4'
}, {
'label' : '周四',
'name' : 'whatDay',
'value' : '5'
}, {
'label' : '周五',
'name' : 'whatDay',
'value' : '6'
}, {
'label' : '周六',
'name' : 'whatDay',
'value' : '7'
}, {
'label' : '周日',
'name' : 'whatDay',
'value' : '1'
} ],
value : "<c:out value='${taskTrigger.whatDay}'/>"
});
new biz.select({
id : "#unit",
data : [ {
'name' : '',
'value' : ''
}, {
'name' : '小时',
'value' : 'hours'
}, {
'name' : '分钟',
'value' : 'minutes'
} ],
value : "<c:out value='${taskTrigger.unit}'/>"
});
new biz.comboboxlist({
id : "#week",
data : [ {
'name' : '周一',
'value' : '2'
}, {
'name' : '周二',
'value' : '3'
}, {
'name' : '周三',
'value' : '4'
}, {
'name' : '周四',
'value' : '5'
}, {
'name' : '周五',
'value' : '6'
}, {
'name' : '周六',
'value' : '7'
}, {
'name' : '周日',
'value' : '1'
} ],
usinglimit : false
});
new biz.comboboxlist({
id : "#quarter",
data : [ {
'name' : '一',
'value' : '1'
}, {
'name' : '二',
'value' : '2'
}, {
'name' : '三',
'value' : '3'
}, {
'name' : '四',
'value' : '4'
}, {
'name' : '最后一个',
'value' : 'L'
} ],
usinglimit : false,
width : 100
});
new biz.comboboxlist({
id : "#someday",
data : [ {
'name' : '1',
'value' : '1'
}, {
'name' : '2',
'value' : '2'
}, {
'name' : '3',
'value' : '3'
}, {
'name' : '4',
'value' : '4'
}, {
'name' : '5',
'value' : '5'
}, {
'name' : '6',
'value' : '6'
}, {
'name' : '7',
'value' : '7'
}, {
'name' : '8',
'value' : '8'
}, {
'name' : '9',
'value' : '9'
}, {
'name' : '10',
'value' : '10'
}, {
'name' : '11',
'value' : '11'
}, {
'name' : '12',
'value' : '12'
}, {
'name' : '13',
'value' : '13'
}, {
'name' : '14',
'value' : '14'
}, {
'name' : '15',
'value' : '15'
}, {
'name' : '16',
'value' : '16'
}, {
'name' : '17',
'value' : '17'
}, {
'name' : '18',
'value' : '18'
}, {
'name' : '19',
'value' : '19'
}, {
'name' : '20',
'value' : '20'
}, {
'name' : '21',
'value' : '21'
}, {
'name' : '22',
'value' : '22'
}, {
'name' : '23',
'value' : '23'
}, {
'name' : '24',
'value' : '24'
}, {
'name' : '25',
'value' : '25'
}, {
'name' : '26',
'value' : '26'
}, {
'name' : '27',
'value' : '27'
}, {
'name' : '28',
'value' : '28'
}, {
'name' : '29',
'value' : '29'
}, {
'name' : '30',
'value' : '30'
}, {
'name' : '31',
'value' : '31'
}, {
'name' : '最后一天',
'value' : 'L'
} ],
columns : 4,
usinglimit : false
});
new biz.datepicker({
id : "#executeTime",
autoUpdateOnChanged : true,
dateFmt : "HH:mm:ss",
realDateFmt : "HH:mm:ss",
minDate : " 00:00:00",
maxDate : " 23:59:59"
});
new biz.datepicker({
id : "#runTime",
autoUpdateOnChanged : true,
dateFmt : "HH:mm:ss",
realDateFmt : "HH:mm:ss",
minDate : " 00:00:00",
maxDate : " 23:59:59"
});
new biz.datepicker({
id : "#endTime",
autoUpdateOnChanged : true,
dateFmt : "HH:mm:ss",
realDateFmt : "HH:mm:ss",
realFullFmt : "%Time",
minDate : " 00:00:00",
maxDate : " 23:59:59"
});
new biz.datepicker({
id : "#beginDate",
realFullFmt : "%Date",
minDate : "1900-01-01 ",
maxDate : "2099-12-31 "
});
new biz.datepicker({
id : "#deadline",
realFullFmt : "%Date ",
minDate : "1900-01-01 ",
maxDate : "2099-12-31 "
});
//生效日期的验证 (日期格式为yyyy-MM-dd)
new biz.validate({
id : "#beginDate",
dateISO : true,
required : true
});
//截止日期的验证 (日期格式为yyyy-MM-dd)
new biz.validate({
id : "#deadline",
dateISO : true,
});
$(":radio").click(function() {
/* var list= $('input:radio:checked').val();
if(list==null){
alert("请选中一个!");
}*/
if ($('input:radio:checked').val() == "dayly") {
//选中每天的时候，每周与每月的不可编辑
$("#dayInterval").attr("disabled", false);
$("#weekInterval").attr("disabled", true);
$("#wdate").attr("disabled", true);
$("#monthInterval").attr("disabled", true);
$("#day1").attr("disabled", true);
$("#someday").attr("disabled", true);
$("#day2").attr("disabled", true);
$("#quarter").attr("disabled", true);
$("#week").attr("disabled", true);
    $("#weekInterval").attr("value",'');
      $("#wdate").attr("value",'');
      $("#monthInterval").attr("value",'');
      $("#detailDay").attr("value",'');         
      $("#someday").attr("value",'');
      $("#quarter").attr("value",'');
      $("#week").attr("value",'');
            
//使每月的选项设置隐藏
// $("#t1").hide();         
}
if ($('input:radio:checked').val() == "weekly") {
//选中每周的时候，每天与每月的选项不可编辑
$("#dayInterval").attr("disabled", true);
$("#weekInterval").attr("disabled", false);
$("#wdate").attr("disabled", false);
$("#monthInterval").attr("disabled", true);
$("#day1").attr("disabled", true);
$("#someday").attr("disabled", true);
$("#day2").attr("disabled", true);
$("#quarter").attr("disabled", true);
$("#week").attr("disabled", true);
$("#dayInterval").attr("value",'');
    $("#monthInterval").attr("value",'');
    $("#detailDay").attr("value",'');         
    $("#someday").attr("value",'');
    $("#quarter").attr("value",'');
    $("#week").attr("value",'');
}
if ($('input:radio:checked').val() == "monthly") {
//选中每月的时候，每天与每周的不可编辑，必须在具体那一天发生的两个选择中选择其中的一个
$("#dayInterval").attr("disabled", true);
$("#weekInterval").attr("disabled", true);
$("#wdate").attr("disabled", true);
$("#monthInterval").attr("disabled", false);
$("#day1").attr("disabled", false);
$("#day2").attr("disabled", false);
$("#dayInterval").attr("value",'');
            $("#weekInterval").attr("value",'');
            $("#wdate").attr("value",'');            
//选中具体的某个月的某一天时
if ($('input:radio:checked').val() == "0") {
$("#someday").attr("disabled", false);
$("#quarter").attr("disabled", true);
$("#week").attr("disabled", true);
$("#quarter").attr("value",'');
            $("#week").attr("value",'');
}
//选中某个月的某个周的某一天时
if ($('input:radio:checked').val() == "1") {
$("#someday").attr("disabled", true);
$("#quarter").attr("disabled", false);
$("#week").attr("disabled", false);
$("#someday").attr("value",'');
}
}
/* var val=$('input:radio:checked').val();
if(val==null){
   alert("每日频率不能为空，请选择选择其中的一项!");
}   */
//每日频率的选择，选择执行时间时
if ($('input:radio:checked').val() == "0") {
$("#executeTime").attr("disabled", false);
$("#HMInterval").attr("disabled", true);
$("#unit").attr("disabled", true);
$("#runTime").attr("disabled", true);
$("#endTime").attr("disabled", true);
    $("#HMInterval").attr("value",'');
      $("#unit").attr("value",'');
      $("#runTime").attr("value",'');
      $("#endTime").attr("value",'');
}
//选择发生周期时
if ($('input:radio:checked').val() == "1") {
$("#executeTime").attr("disabled", true);
$("#HMInterval").attr("disabled", false);
$("#unit").attr("disabled", false);
$("#runTime").attr("disabled", false);
$("#endTime").attr("disabled", false);
$("#executeTime").attr("value",'');
}
});
</script>
页: [1]
查看完整版本: 多个radio的选项设置