Disable Text Box with CSS Style

programming web dev
1

I’m trying to develop the code below. I’d like to control the textbox styll using CSS when the text box is disabled and enabled.

Here is a link to see what I’m looking to do:
http://charity-funding.us/groupRes/disableTest.html

As you can see, when the radioBTN for MasterContract is selected the textBoxes are disabled. Any of the other three radioBTNs enables the textBoxes.

I’ve added a style to two textboxes as an example. The style is active when the box is enabled or disabled. I’d like to create a NEW style specific to the DISABLED box when the MasterContract radio is SELECTED. Can anyone help with this please? THANKS!!!

Here is the code below…



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>


<script language="javascript">

function enableField()
{
document.form1.address2.disabled=false;
document.form1.address22.disabled=false;
document.form1.address23.disabled=false;
document.form1.address24.disabled=false;
}

function disableField()
{
document.form1.address2.disabled=true;
document.form1.address22.disabled=true;
document.form1.address23.disabled=true;
document.form1.address24.disabled=true;
}

 
</script>


<style type="text/css">
<!--
body {
	background-color: #FFFFFF;
}
.inputext {
    font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #243E5F;
	width: 170px;
	border: 1px solid #afbadd;
	background-image: url(http://www.charity-funding.us/groupRes/images/pagebuild/txtBoxBG.gif);
	background-repeat: repeat-x;
	margin-top: 2px;
	margin-bottom: 5px;
	height: 22px;
	background-color: white ! important;
	z-index: 1000;	
}
-->
</style>
</head>

<body onload="disableField()">
<form name="form1" >
  <p>
  <input name="address2" type="text" disabled="true"  id="address2" />
  <input name="address22" type="text" disabled="true" class="inputext" id="address22" />
  <input name="address23" type="text" disabled="true"  id="address23" />
    <input name="address24" type="text" disabled="true" class="inputext" id="address24" />
    
</p>
  <p>
    <input name="radiobutton" type="radio" value="radiobutton" onfocus="enableField()"/>
    <span class="txtBlue">
    <html:radio property="payType" value="<%=hotel.model.property.Rate.PREPAY%>">Pre-Pay To Merchant Account</html:radio>
  </span>
    <input name="radiobutton" type="radio" value="radiobutton" onfocus="enableField()" />
  Pay Upon Checkout  
  <input name="radiobutton" type="radio" value="radiobutton" onfocus="enableField()"/>
  Pre-Pay To Hotel   
  <input name="radiobutton" type="radio" onfocus="disableField()" value="test" checked="checked" />
  Master Contract  </p>
</form>

</body>
</html>