# Disable Text Box with CSS Style

**URL:** <https://forum.kirupa.com/t/disable-text-box-with-css-style/207126>\
**Category:** web dev\
**Created:** [November 14, 2006, 11:14pm UTC](https://forum.kirupa.com/t/disable-text-box-with-css-style/207126 "2006-11-14T23:14:53Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![dude9er](https://avatars.discourse-cdn.com/v4/letter/d/4af34b/32.png) [@dude9er](https://forum.kirupa.com/u/dude9er)\
**Post date:** [November 14, 2006, 11:14pm UTC](https://forum.kirupa.com/t/disable-text-box-with-css-style/207126/1 "2006-11-14T23:14:53Z")

</div>

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](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…

```auto

<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>

```
