blinding/blocking/gray select forms [Archive]

hantz

11-13-2007, 09:51 AM

imagen you got a 1 select box(place)
and underneath 5 other select boxes(day/month/year/hour/minute)
as default those 5 select boxes are blind...blind this means that somehow they got gray colored...i am not sure how to decribe it but that is not just that you can't touch those fields they kind of gray scaled...
and only 2 options from the first select list can bring those 5 select boxes to life...that means that the blind\gray will disappear and user will be able to select them...

this code doing the same but with checkbox...if the box is checked it enables the 5 selects...
i need to use anoter select box that only 2 of it's options will enable the other 5 select boxes

<script type="text/javascript">
function enableDisable(oChk){
var disable = !oChk.checked;
var arglen = arguments.length;
var obj, startIndex = 1;
var frm = oChk.form;
for (var i=startIndex;i<arglen;i++){
obj = frm.elements[arguments[i]];
if (typeof obj=="object"){
if (document.layers) {
if (disable){
obj.onfocus=new Function("this.blur()");
if (obj.type=="text") obj.onchange=new Function("this.value=this.defaultValue");
}
else {
obj.onfocus=new Function("return");
if (obj.type=="text") obj.onchange=new Function("return");
}
}
else obj.disabled=disable;
}
}
}
</script>
</head>
<body>
<form name="example1">
Enable/Disable Fields: <input type="checkbox" name="control1" onclick="enableDisable(this,'day','month','year','hour','min')" />
<br />

day <select name="day" disabled="disabled" />
<option>option1</option>
</select>

month <select name="month" disabled="disabled" />
<option>option1</option>
</select>

year <select name="year" disabled="disabled" />
<option>option1</option>
</select>

hour <select name="hour" disabled="disabled" />
<option>option1</option>
</select>

min <select name="min" disabled="disabled" />
<option>option1</option>
</select>
</form>

jscheuer1

11-13-2007, 02:38 PM

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function enableDisable(oSel, n1, n2){
var disable = oSel.options.selectedIndex!=n1&&oSel.options.selectedIndex!=n2;
var arglen = arguments.length;
var obj, startIndex = 3;
var frm = oSel.form;
for (var i=startIndex;i<arglen;i++){
obj = frm.elements[arguments[i]];
if (typeof obj=="object"){
if (document.layers) {
if (disable){
obj.onfocus=new Function("this.blur()");
if (obj.type=="text") obj.onchange=new Function("this.value=this.defaultValue");
}
else {
obj.onfocus=new Function("return");
if (obj.type=="text") obj.onchange=new Function("return");
}
}
else obj.disabled=disable;
}
}
}
</script>
</head>
<body>
<form action="#" name="example1">
<div>
<select name="control1" onchange="enableDisable(this, 1, 2, 'day','month','year','hour','min')">
<option value="">No</option>
<option value="">Yes</option>
<option value="">Maybe</option>
<option value="">Absolutely Not!</option>
</select>
<br>
<input disabled type="text" name="day">
<input disabled type="text" name="month">
<input disabled type="text" name="year">
<input disabled type="text" name="hour">
<input disabled type="text" name="min">
</div>
</form>
</body>
</html>

Notes: If you change the position of the 'acceptable' selections (currently 'Yes' and 'Maybe'), a little bit of configuration is required here:

<select name="control1" onchange="enableDisable(this, 1, 2, 'day','month','year','hour','min')">

Their position in the select is represented 0 (which is 'No', in this example) to whatever, make sure the two numbers in red in the above correspond to their actual positions.