Define Color of Disabled Textbox

Forum Moderators: not2easy

Message Too Old, No Replies

Define Color of Disabled Textbox

kajsng

9:12 pm on May 18, 2005 (gmt 0)

Hey. I have a textbox class for all of the input fields on forums, but sometimes I need to disable/enabled them dynamically (eg when a user clicks on a checkbox). I have the disabling/enabling fine, the problem is that when the textbox is disabled, it looks the exact same. I was wondering if there's a way to define the color the textbox becomes when it gets disabled. Thanks.

createErrorMsg

9:42 pm on May 18, 2005 (gmt 0)

The javascript function in the test page below runs on the click of the "Yes" checkbox. It pulls all of the input tags, then cycles through them looking for the one that matches the classname fed to the function (in this case, "meat"). When it find it, it sets that input's class name to "disabled," which is styled in the CSS with a black background. You could also use CSS to style that input to display:none, or visibility:hidden and remove it from the page, altogether.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
body{
font:70%/1.7 Tahoma, Verdana, sans-serif;
background:#369;
color:#fff;
}
#menu{
width:500px;
}
input.disabled{
background:#000;
/*display:none; uncomment this to get rid of the input box, altogether*/
}
</style>
<script type="text/javascript">
function visiblyDisableInput(inputName){
all_inputs = document.getElementsByTagName('input');
for(j=0;j<all_inputs.length;j++){
if(all_inputs[j].className == "meat"){
all_inputs[j].className = "disabled";
}
}
}
</script>
</head>
<body>
<div id="menu">
<form name="myMenu">
<fieldset><legend>Make selections to build your dinner menu:</legend>
<p>Are you a vegetarian? <label>Yes: <input type="checkbox" onClick="visiblyDisableInput('this_box')" /></label> <label>No: <input type="checkbox" /></label></p>
<p>Would you like your steak rare, medium, or well-done? <input type="text" name="steak" class="meat" /></p>
<p>Do you prefer steamed or fried shrimp? <input type="text" name="shrimp" class="meat" /></p>
<p>What would you like on your baked potato? <input type="text" name="potato" class="potato" /></p>
</fieldset>
</form>
</div>
</body>
</html>

Obviously, this should use radio buttons, not checkboxes, but since you asked specifically about checkboxes...

cEM

membername114

10:19 pm on May 24, 2005 (gmt 0)

That does seem to work very well, however, when you uncheck the textboxes nothing happens.

Is there anyway you can get the boxes to return back to normal when the box is unchecked.

createErrorMsg

11:17 am on May 25, 2005 (gmt 0)

Is there anyway you can get the boxes to return back to normal when the box is unchecked.

This makes this question a javascript one, since the script is doing the work of manipulating classes to which CSS is attached. I only mention this because I am a JavaScript hack, meaning that I know enough of the language to make things happen, but not enough to make them happen in the most efficient or effective way. Although the code change below does what you ask, it does not contain any safeguards, browser checks, error handling, etc that all good scripts do. If you intend to use this on a site, I suggest having someone in the Javascript Forum [webmasterworld.com] give pointers on how to make it more stable, secure and efficient.

Nonetheless, swap this out with the script tags in the code block above.

<script type="text/javascript">
function visiblyDisableInput(inputName){
all_inputs = document.getElementsByTagName('input');
for(j=0;j<all_inputs.length;j++){
if(all_inputs[j].className == "meat"){
all_inputs[j].className = "disabled";
}
else if (all_inputs[j].className == "disabled"){
all_inputs[j].className = "meat";
}
}
}
</script>

cEM