?
Solved

cfselect checkbox in html form - how to dynamically disable?

Posted on 2011-03-01
10
Medium Priority
?
944 Views
Last Modified: 2012-08-13
I'm trying to dynamically disable a cfselect checkbox in a form which is populated from a cfquery.  I'm also dynamically setting the checkbox and tooltip (and these both work fine).

The following "hard codiing" of "disabled" works:

<cfinput type="checkbox" 
name="chFlag[#jobs.currentRow#]" 
value="1" 
checked=#checkedState# 
tooltip=#tooltipText# 
disabled
>

Open in new window


but of course I want "disabled" to be dynamically determined each time.

I've tried:

<cfinput type="checkbox" 
name="chFlag[#jobs.currentRow#]" 
value="1" 
checked=#checkedState# 
tooltip=#tooltipText# 
<cfif picmicFlag EQ 1> disabled</cfif> 
>

Open in new window


and also tried:

<cfinput type="checkbox" 
name="chFlag[#jobs.currentRow#]" 
value="1" 
checked=#checkedState# 
tooltip=#tooltipText# 
#Iif(picmicFlag EQ 1,"disabled","")#
>

Open in new window


but neither of these work.

Can someone help me with the right syntax to get things work?

0
Comment
Question by:ShanghaiD
  • 5
  • 4
10 Comments
 
LVL 39

Assisted Solution

by:gdemaria
gdemaria earned 1600 total points
ID: 35009052

This should work

<cfinput type="checkbox"
name="chFlag[#jobs.currentRow#]"
value="1"
checked=#checkedState#
tooltip=#tooltipText#
<cfif picmicFlag EQ 1>disabled</cfif>



But the disabled is usually set to true or false...

<cfinput type="checkbox"
name="chFlag[#jobs.currentRow#]"
value="1"
checked=#checkedState#
tooltip=#tooltipText#
<cfif picmicFlag EQ 1>disabled="true"</cfif>


Try testing the value of picmicFlag or testing by just setting it to tru

<cfinput type="checkbox"
name="chFlag[#jobs.currentRow#]"
value="1"
checked=#checkedState#
tooltip=#tooltipText#
<cfif  TRUE>disabled="true"</cfif>




0
 
LVL 39

Assisted Solution

by:gdemaria
gdemaria earned 1600 total points
ID: 35009071
on a seperate note, you don't want to name your field using the brackets CHFLAG[1]  

I think you want just  CHFLAG1  or perhaps  CHFLAG_1.   It would not be good to have breackets in your field name


<cfinput type="checkbox"
    name="chFlag#jobs.currentRow#"

0
 
LVL 52

Assisted Solution

by:_agx_
_agx_ earned 400 total points
ID: 35009336
no points ...

you don't want to name your field using the brackets CHFLAG[1]  

Unless you're using a framework that can interpret that naming convention (some of them do). If not, I agree with gdemaria. It's easier to omit the brackets. Reason is you'll have to use assoc. array notation to access the values due to the special characters.

ie <cfset v = FORM["CHFLAG[1]"]>  
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 

Accepted Solution

by:
ShanghaiD earned 0 total points
ID: 35014015
_aqx_: I've noted your comments re brackets and have removed them - thanks!

qdemaria:  I could not get the <cfif to work.  I get error message: "Invalid token c found on line 208 at column 2":

206 : checked=#checkedState# 
207 : tooltip=#tooltipText# 
208 : <cfif picmicFlag EQ 1>disabled="true"</cfif> 
209 : > 
210 : 

Open in new window


I found an alternative solution using a hidden form field which I set to the picmicFlag value from the db query and which I then test using an onMouseDown event, as follows:

<cfinput type="hidden" 
name="picmic#jobs.currentRow#" 
id="picmic#jobs.currentRow#" 
value="#jobs.picmicFlag#">

<cfinput type="checkbox" 
name="chFlag#jobs.currentRow#" 
id="chFlag#jobs.currentRow#" 
value="1" 
checked=#checkedState# 
tooltip=#tooltipText# 
onMouseDown="if(document.getElementById('picmic#jobs.currentRow#').value == 1){this.disabled=true;}">

Open in new window


This achieves what I am trying to do (not allowing users to uncheck the box if picmicFlag = 1), so I guess my problem is solved.

A related problem which now arises (which I think I need to put in a new thread) is that when I tried to change the onMouseDown event to onMouseOver, although it also disabled the checkbox, it then caused my tooltip NOT to appear.  Not sure why this happened, so I changed back to onMouseDown, although I'd still prefer to be able to use onMouseOver -- but only if disabled and also showing tooltip work).

Thanks everyone for all the insight, and apologies for the apparent time delay in responding to all your suggestions due to the  time difference between the USA and China.
0
 
LVL 39

Expert Comment

by:gdemaria
ID: 35014046
The problem may been in your tooltip running over, try removing it or moving it down to the end.

Either way, the disabled  attribute takes a boolean value, so if picmicflag is true of false, simply do this..


<cfinput type="checkbox"
    name="chFlag#jobs.currentRow#"
    value="1"
    checked=#checkedState#
    disabled="#picmicFlag#"
    tooltip=#tooltipText#



0
 
LVL 39

Expert Comment

by:gdemaria
ID: 35014056

Oh, your tool tip doesn't have quotes around it !


206 : checked=#checkedState#
207 : tooltip=#tooltipText#  <============== missing quotes ========
208 : <cfif picmicFlag EQ 1>disabled="true"</cfif>
209 : > 

0
 

Author Comment

by:ShanghaiD
ID: 35014251
Thanks for the further comments, but they still don't seem to work for me.  However, I have finally solved things to enable OnMouseOver and tooltip to both work together, by removing the tooltip from the cfselect tag and instead putting in in a cftooltip tag which contains the cfselect tag, as follows:

<cftooltip tooltip="#tooltipText#">
	<cfinput type="checkbox" 
	name="chFlag#jobs.currentRow#" 
	id="chFlag#jobs.currentRow#" 
	value="1" 
	checked=#checkedState# 
	onMouseOver="if(document.getElementById('picmic#jobs.currentRow#').value == 1){this.disabled=true;}">
</cftooltip>

Open in new window

0
 
LVL 39

Expert Comment

by:gdemaria
ID: 35014288

It's a shame you have to go to such lengths to work-around the problem.

This is pretty basic tag use, it should work if we just stuck with it.

0
 

Author Comment

by:ShanghaiD
ID: 35014379
I also don't like "giving up", but I'm not sure what to do (apart from using the cftooltip tag).

The code for the onMouseDown and onMouseOver checkboxes are identical, except for the names and ids of each:

<cfinput type="checkbox" 
name="chFlag#jobs.currentRow#" 
id="chFlag#jobs.currentRow#" 
value="1" 
checked=#checkedState# 
tooltip=#tooltipText# 
onMouseDown="if(document.getElementById('picmic#jobs.currentRow#').value == 1){this.disabled=true;}">

<cfinput type="checkbox" 
name="2chFlag#jobs.currentRow#" 
id="2chFlag#jobs.currentRow#" 
value="1" 
checked=#checkedState# 
tooltip=#tooltipText# 
onMouseOver="if(document.getElementById('picmic#jobs.currentRow#').value == 1){this.disabled=true;}">

<cfinput type="hidden" 
name="picmic#jobs.currentRow#" 
id="picmic#jobs.currentRow#" 
value="#jobs.picmicFlag#">
 

Open in new window


On running the page, the tooltip shows for onMouseDown only, but not for onMouseOver.  However, on checkign the source page I see identcial tooltip listeners:

<![CDATA[ */
	
	YAHOO.util.Event.addListener("chFlag3","mouseover",ColdFusion.Tooltip.getToolTip,{"_cf_query":"","context":"chFlag3","hidedelay":250,"showdelay":200,"autodismissdelay":5000,"preventoverlap":"true","text":'A Job PIC or MIC cannot be unchecked'});
/* ]]> */</script>

<script type="text/javascript">/* <![CDATA[ */	
	
	YAHOO.util.Event.addListener("2chFlag3","mouseover",ColdFusion.Tooltip.getToolTip,{"_cf_query":"","context":"2chFlag3","hidedelay":250,"showdelay":200,"autodismissdelay":5000,"preventoverlap":"true","text":'A Job PIC or MIC cannot be unchecked'});
/* ]]> */</script>

Open in new window


and also identical html output for the select codes generated by ColdFusion (except of course their names and ids) but curiously the order of the html output is not identical -- the checked="checked" is placed differently in the second generated html select code:

<input name="chFlag13" type="checkbox" value="1" id="chFlag13"  checked="checked"  onmousedown="if(document.getElementById('picmic13').value == 1){this.disabled=true;}"  /> 

<input name="2chFlag13" type="checkbox" value="1" id="2chFlag13"  onmouseover="if(document.getElementById('picmic13').value == 1){this.disabled=true;}"  checked="checked"  /> 

<input name="picmic13" type="hidden" value="1" id="picmic13"  /> 

Open in new window


0
 

Author Closing Comment

by:ShanghaiD
ID: 35045716
Comments were timely and helpful and enabled me to find an alternative working solution to my problem.
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PROBLEM: How to add your own buttons to the bottom toolbar with paging info ( result count ). While creating a cfgrid, I ran into an issue where I wanted to embed my own custom buttons where the default ones ( insert / delete / etc… ) are for aes…
This is an updated version of a post made on my blog over 3 years ago. It is unfortunately, still very relevant as we continue to see both SQLi (SQL injection) and XSS (cross site scripting) attacks hitting some of the most recognizable website and …
Screencast - Getting to Know the Pipeline
As many of you are aware about Scanpst.exe utility which is owned by Microsoft itself to repair inaccessible or damaged PST files, but the question is do you really think Scanpst.exe is capable to repair all sorts of PST related corruption issues?
Suggested Courses

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question