Setting the disabled property of a form field (help needed)

This post is more than 2 years old.

Has anyone ever seen a case where you can't use JavaScript to change the disabled property of a form field? I've used this exact same code elsewhere but for some reason it isn't working for me. I get no error, but the property never gets updated. Here is the JavaScript I'm using:

if(offset == 0) { alert('set it to disble');$("prevbutton").disabled=true;} else { $("prevbutton").disabled=false; }

To be sure I wasn't doing anything stupid, I did alert $("prevbutton") to confirm it was an input field. I also alerted the disabled status and it correctly said true for this button:

<input type="button" id="prevbutton" value="Prev" onclick="UpdatePage(pageOffset - pageSize);" />

As I said - I get no error at all - but it is almost like the button's disabled field is readonly when it should be read/write.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Michael Anderson posted on 1/21/2007 at 10:51 PM

.enabled = false

Comment 2 by Mrinal posted on 1/21/2007 at 11:57 PM

try this:

document.getElementById("prevbutton").disabled=true;

also Michael's solution will not work, there is no enabled property.

Comment 3 by Rob Gonda posted on 1/22/2007 at 12:15 AM

* Ensure there is only one element with the id 'prevbutton'. If you have more than one, even if it's hidden, your function will target the first one.
* If you included more than one JavaScript library in this page, your $() abbreviation may have been altered. E.g. if you included prototype or AjaxCFC, and then included jQuery or YUI, the latest include will overwrite the $() namespace.

Also, try debugging it a little, like changing the value of the text, or test your $() functions using Firebug. With Firebug (if you're a FF user), you a full JS console and debugging tools.. you may set breakpoints, see values of local and global variables and more; nevertheless, the most straight-forward way would be opening the JS console, and typing $("prevbutton").disabled=true; and see what happens.

HTH

Comment 4 by MikeR posted on 1/22/2007 at 12:19 AM

Also make sure your page fully validates.
HTML errors can sometimes confuse javascripts.

Comment 5 by Raymond Camden posted on 1/22/2007 at 4:47 AM

Hey guys - see my latest post. Thanks to all of you (and Rob G) for helping me get this fixed.

Comment 6 by John posted on 9/21/2007 at 10:37 AM

Just for anyone who stumbles on this in the future (like I did). The reason it's not working is that you're accessing a jQuery object and not a DOM object -- which ".disabled" is part of. The correct format is:

$("prevbutton").get(0).disabled = true;

or

$("prevbutton")[0].disabled = true;

or, if you want to target multiple objects:

$(".button").each( function() { this.disabled = true } );

The $( ) function returns a jQuery object while the .get( ) method or array index [ ] return DOM object(s) for the given selection.

Comment 7 by Michael McDaniel posted on 9/28/2007 at 11:20 PM

I wrote a little extension for jquery for disabling controls.

jQuery.fn.extend({
filterDisabled : function(){ return this.filter(function(){return (typeof(this.disabled)!=undefined)})},
disabled: function(h) {
if (h!=undefined) return this.filterDisabled().each(function(){this.disabled=h});
this.filterDisabled().each(function() {h=((h||this.disabled)&&this.disabled)}); return h;
},
toggleDisabled: function() { return this.filterDisabled().each(function(){this.disabled=!this.disabled});}
});

So, with the piece of code above, you can do the following:

$("prevButton").disabled(true);
or use it with multiple objects:
$(".button").disabled(true);
or just toggle states
$(".button").toggleDisabled();
or get the state of a control
if ($("prevButton").disabled()) { /*we are disabled*/}

This will also chain like other calls:
$(".button").disabled(true).val("disabled!");

Comment 8 by Jim posted on 9/21/2009 at 10:32 PM

I need to do a variation of this and just can't seem to get it right. I have a form with a radio control and when a certain selection is selected I need to enable a select control otherwise the select control is disabled. I spent the last four hours trying to figure this one out. The code doesn't throw an error in FB. In fact it doesn't do anything. Any help would be appreciated:

Here's my jquery: (inside a script tag of course with some other code)

$(":input[@name='prTyp']").select(function(){
if ($(":input[@name='prTyp']:checked").val() == '1')
$('#HWType').attr("readonly", true);
else
$('#HWType').attr("readonly", false);
});

My html (cf):

<div id="prtyps" class="fullrow">
<div class="padleft"><h5>Types:</h5></div>
<div>
<ol>
<li class="squishbot">
<cfinput type="radio" name="prTyp" id="prTyp" value="1" /> Outbound from PAR</li>
<li>
<cfinput type="radio" name="prTyp" id="prTyp" value="2" /> Inbound to PAR</li>
<li class="squishtop">
<cfinput type="radio" name="prTyp" id="prTyp" value="3" checked="yes"/> All</li>
</ol>
</div>
</div>
<div id="RepairUnits" class="fullrow">
<div class="padleft"><h5>Repair Unit: </h5></div>
<div class="rowrightfull">
<!--- Add ajax drop down list to add filter capability --->
<cfset ListName = "Hardware Type">
<cfinvoke component="portal" method="ddlList" returnvariable="ddlListRet">
<cfinvokeargument name="thisDSN" value="#application.DSN#"/>
<cfinvokeargument name="thisField" value="#ListName#"/>
</cfinvoke>

<label for="HWType" class="fltleft">Hardware:
<cfselect name="HWType" id="HWType" class="fltleft">
<cfloop query="ddlListRet">
<cfoutput><option value="#objid#">#title#</option></cfoutput>
</cfloop>
</cfselect>
</label>

<label for="A_COMPONET" class="fltleft">Component:
<cfselect class="fltleft" name="A_COMPONET" id="A_COMPONET" bind="CFC:portal.myList({HWType})" bindonload="true" display="title" value="title">
<cfoutput><option value="title">title</option></cfoutput> </cfselect>
</label>

<cfset ListName = "Action Code">
<cfinvoke component="portal" method="ddlList" returnvariable="ddlListRet">
<cfinvokeargument name="thisDSN" value="#application.DSN#"/>
<cfinvokeargument name="thisField" value="#ListName#"/>
</cfinvoke>
<label for="ActCode" class="fltleft">Action Code:
<select name="ActCode" id="ActCode" class="fltleft">
<cfloop query="ddlListRet">
<cfoutput><option value="#ddlListRet.objid#">#ddlListRet.title#</option></cfoutput>
</cfloop>
</select></label>
</div>
</div>

Comment 9 by Raymond Camden posted on 9/21/2009 at 10:34 PM

FB?

Also - I'd consider removing the cfinput statements and converting them to just input blocks. CF uses its own JS and may get in the way of any jQuery you wan to use.

Comment 10 by Jim posted on 9/21/2009 at 10:48 PM

FB = Fire Bug

I've tried cfinput (they are inside a cfform) and input. It doesn't make a difference.

Comment 11 by Raymond Camden posted on 9/21/2009 at 10:56 PM

I'd switch both the cfinputs AND cfform to the vanilla form. Again, just to keep things simple. Have you tried that?

Comment 12 by Jim posted on 9/21/2009 at 11:14 PM

I have inputs (date picker) that require the cfform. I also have cfinput fields that use a jquery autosuggest. I stuck my jquery code in that block of script. Should I put it in it's on script block and ready statement>

Comment 13 by Raymond Camden posted on 9/21/2009 at 11:18 PM

What I'd recommend then is some simplification. Build a form with ONLY the radio and select items. No databases. No cfinvokes. You need to strip things down to the barest example. If you can, then shoot it over and I can try to get it working as well.

Comment 14 by Raymond Camden posted on 9/21/2009 at 11:27 PM

The following code worked ok for me. A bit verbose as it uses NAMEs and not IDs.

<script src="http://ajax.googleapis.com/..."></script>
<script>
$(document).ready(function() {

$("select[name='people']").attr("disabled", true)

$("input:radio[name='inviteothers']").change(function() {
if($(this).val() == "yes") {
$("select[name='people']").attr("disabled", false)
} else {
$("select[name='people']").attr("disabled", true)
}
})
})
</script>

<cfform name="foo">

Others invited?<br/>
<input type="radio" name="inviteothers" value="no">No<br/>
<input type="radio" name="inviteothers" value="yes">Yes<br/>

<select name="people">
<option>How many?</option>
<option value="0-10">0-10</option>
<option value="10+">10 or more</option>
</select>

</cfform>

Comment 15 by Jim posted on 9/21/2009 at 11:51 PM

THANK YOU, THANK YOU, THANK YOU - Ray

Your code worked in my test page. I modified to my code And it still worked. Plugged your script into my real page, did a couple of name updates and it WORKED. You're my Jedi for sure.

Jim