Solved

cfselect checkbox in html form - how to dynamically disable?

Posted on 2011-03-01
10
921 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 400 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 400 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 100 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
 

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
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 
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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Hi, I will be creating today a basic tutorial on how we can create a Mail Custom Function and use it where ever we want. The main advantage about creating a custom function is that we can accommodate a range of arguments to pass to the Function and …
Hi, Even though I have created this Tutorial on My personal Blog, Some people might not able to find my website, So here i am posting it again Today, from the topic it is very clear that i will be showing you here the very basic usage of how we …
This video discusses moving either the default database or any database to a new volume.
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

760 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

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now