<select name="searchKt.select" id="select">
<option value="0">
请选择查询方式
</option>
<option value="depatment">
仅按部门名称
</option>
<option value="reimbursed">
仅按立项年度
</option>
<option value="reimname">
按立项年度和成员姓名
</option>
<option value="reimdept">
按立项年度和部门名称
</option>
<option value="year">
仅按结题年度
</option>
<option value="yearname">
按结题年度和成员姓名
</option>
<option value="yeardept">
按结题年度和部门名称
</option>
<option value="name">
仅按成员姓名
</option>
</select>
<br/>
<font size="2">立项年度:</font>
<input name="searchKt.time1" type="text" size="25" readonly="readonly" onClick="showcalendar(event, this);"/>
<font size="2">至:</font>
<input name="searchKt.time2" type="text" size="25" readonly="readonly" onClick="showcalendar(event, this);"/>
<font size="2">成员姓名:</font>
<input type="text" name="searchKt.name">
<font size="2">部门:</font>
<input type="text" name="searchKt.deptName">
<input type="submit" name="submit" value="查询">我的要求很简单：
选择：
仅按立项年度查询 则 “成员姓名”，“至”和“部门”那里变灰，不可以编辑，
仅按成员姓名 则 “立项年度”和“至“ 后的输入框变灰，“部门”不可以编辑
仅按部门名称 则除“部门”可以编辑，其实都变灰，不可以编辑
仅按立项年度查询和成员姓名 则 只有“部门”变灰
仅按立项年度查询和部门名称 则 只有“成员”变灰
我想我的意思大家明白吧。因为要马上完成，没办法，让我自己写，要写好久。哎。所以希望让大家帮个帮！！！！
谢谢啊
将你写的<font size="2">立项年度:</font>
<input name="searchKt.time1" type="text" size="25" readonly="
等都放到div里,在function set里面判断select框的内容,然后设置相应的div为disable
<SCRIPT LANGUAGE="JavaScript">
<!--
function a(v){
if(v=="A"){
document.form1.aa.disabled=false;
document.form1.bb.disabled=true;
}
if(v=="B"){
document.form1.aa.disabled=true;
document.form1.bb.disabled=false;
}
//多个if可以使用switch
}
//-->
</SCRIPT>
</HEAD> <BODY>
<form name="form1">
<select name="searchKt.select" id="select" onchange="a(this.options[this.selectedIndex].value)">
<option value="0">
请选择查询方式
</option>
<option value="A">
A
</option>
<option value="B">
B
</option>
</select><br/>
A: <input name="aa" type="text" size="25"/><br/>
B: <input name="bb" type="text" size="25"/><br/>
</form>
</BODY>
$(document).ready(function()
{ $("#select").change(function(){
jQuery('option:selected', this).each(function(){ //印出選到多個值
alert(this.value);
if(this.value=="depatment")
{
//设置textbox样式是否readonly；
}
});
});
});
<select name="searchKt.select" id="select">
<option value="0">
请选择查询方式
</option>
<option value="depatment">
仅按部门名称
</option>
<option value="reimbursed">
仅按立项年度
</option>
<option value="reimname">
按立项年度和成员姓名
</option>
<option value="reimdept">
按立项年度和部门名称
</option>
<option value="year">
仅按结题年度
</option>
<option value="yearname">
按结题年度和成员姓名
</option>
<option value="yeardept">
按结题年度和部门名称
</option>
<option value="name">
仅按成员姓名
</option>
</select>
<br/>
<font id="lixiang" size="2">立项年度:</font>
<input name="searchKt.time1" type="text" size="25" readonly="readonly" onClick="showcalendar(event, this);"/>
<font id="to" size="2">至:</font>
<input id="searchKt.time2" name="searchKt.time2" type="text" size="25" readonly="readonly" onClick="showcalendar(event, this);"/>
<font id="chenyuan" size="2">成员姓名:</font>
<input type="text" id="searchKt.name" name="searchKt.name">
<font id="bumen" size="2">部门:</font>
<input type="text" id="searchKt.deptName" name="searchKt.deptName">
<input type="submit" name="submit" value="查询"> var $ = function(element) {
var result = [];
if (!$.isArray(element)) element = [element];
for (var i = 0, count = element.length; i < count; i++) {
result.push(document.getElementById(element[i]));
}
return fn.extend(result, fn);
} $.isArray = function(object) {
return object != null && typeof object == "object" &&
'splice' in object && 'join' in object;
}
var fn = $.prototype =
{
extend: function(dest, source) {
for (var i in source) dest[i] = source[i];
return dest;
},
invalid: function() {
for (var i = 0, count = this.length; i < count; i++) {
this[i].style.color = '#cccccc';
this[i].disabled = true;
}
return this;
}
}
$('select')[0].onchange = function() {
switch ($('select')[0].value) {
case 'reimbursed':
$(['chenyuan', 'to', 'bumen', 'searchKt.time2', 'searchKt.name', 'searchKt.deptName']).invalid();
break;
case ....
.....
以此类推
}
}
$(document).ready(function()
{ $("#select").change(function(){
if(this.value=="depatment")
{
//设置textbox样式是否readonly；
}
});
});
var $ = function(element) {
var result = [];
if (!$.isArray(element)) element = [element];
for (var i = 0, count = element.length; i < count; i++) {
result.push(document.getElementById(element[i]));
}
return fn.extend(result, fn);
} $.isArray = function(object) {
return object != null && typeof object == "object" &&
'splice' in object && 'join' in object;
}
var fn = $.prototype =
{
extend: function(dest, source) {
for (var i in source) dest[i] = source[i];
return dest;
},
enabled: function(isEnabled) {
for (var i = 0, count = this.length; i < count; i++) {
this[i].style.color = isEnabled ? '' : '#cccccc';
this[i].disabled = !isEnabled;
}
return this;
}
}
$('select')[0].onchange = function() {
$(['chenyuan', 'to', 'bumen', 'searchKt.time2', 'searchKt.name', 'searchKt.deptName']).enabled(true);
switch ($('select')[0].value) {
case 'reimbursed':
$(['chenyuan', 'to', 'bumen', 'searchKt.time2', 'searchKt.name', 'searchKt.deptName']).enabled(false);
break;
}
}
<html>
<head>
<title>test</title>
<script type="text/javascript">
var selectToInput = {
depatment:"searchKt.deptName",
reimbursed:"searchKt.time1",
reimname:"searchKt.time1 searchKt.name",
reimdept:"searchKt.time1 searchKt.deptName",
year:"searchKt.time2",
yearname:"searchKt.time2 searchKt.name",
yeardept:"searchKt.time2 searchKt.deptName",
name:"searchKt.name"
};
function setInput(obj){
var inputs = selectToInput[obj.options[obj.selectedIndex].value].split(" ");
var allInput = document.getElementsByTagName("input");
for (var index in allInput){
if (/^searchKt.*$/.test(allInput[index].id)){ //不用input.type != "submit" ，因为页面内可能还有其它的input元素
allInput[index].disabled = "true";
}
}
for(var index in inputs){
document.getElementById(inputs[index]).removeAttribute('disabled');
}
};
</script>
</head>
<body>
<select name="searchKt.select" id="select" onchange="setInput(this);">
<option value="0">请选择查询方式</option>
<option value="depatment"> 仅按部门名称 </option>
<option value="reimbursed"> 仅按立项年度 </option>
<option value="reimname"> 按立项年度和成员姓名 </option>
<option value="reimdept"> 按立项年度和部门名称 </option>
<option value="year"> 仅按结题年度 </option>
<option value="yearname"> 按结题年度和成员姓名 </option>
<option value="yeardept"> 按结题年度和部门名称 </option>
<option value="name"> 仅按成员姓名 </option>
</select> <br/>
<font size="2">立项年度:</font><input id="searchKt.time1" name="searchKt.time1" type="text" size="25" readonly="readonly" onClick="showcalendar(event, this);"/>
<font size="2">至:</font> <input id="searchKt.time2" name="searchKt.time2" type="text" size="25" readonly="readonly" onClick="showcalendar(event, this);"/>
<font size="2">成员姓名:</font> <input type="text" id="searchKt.name" name="searchKt.name">
<font size="2">部门:</font> <input type="text" id="searchKt.deptName" name="searchKt.deptName"> <input type="submit" name="submit" value="查询">
</body>
</html>