.enabled = false

try this:

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

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

* 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

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

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

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.

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!");

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>

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.

FB = Fire Bug

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

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

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>

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.

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>

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