Disable Text Box with CSS Style

**dude9er** · 11-14-2006, 11:12 PM

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

Code:

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

**tech_support** · 11-15-2006, 05:37 AM

You can't. But you can hide it.

**Twey** · 11-15-2006, 09:12 AM

The best way of "disabling" a text box with CSS is to put a transparent element over the top of it so it can't receive focus. It will also be necessary to prevent keyboard navigation.

Of course, this is an ugly hack. Just set .disabled in your script.

Code:

<script language="javascript">

language is deprecated;
type is required.

Code:

document.form1.address2.disabled=false;
document.form1.address22.disabled=false;
document.form1.address23.disabled=false;
document.form1.address24.disabled=false;

Try:

Code:

var f = document.forms.form1.elements;
for(var i = 0; i < f.length; ++i)
  f['address2' + (i || '')].disabled=false;

Thread: Disable Text Box with CSS Style

Thread Tools

Search Thread

Disable Text Box with CSS Style

Bookmarks

Bookmarks

Posting Permissions