Solved

cfselect checkbox in html form - how to dynamically disable?

Posted on 2011-03-01
10
924 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
Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

 

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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Today, I was working on some optimization and spam-stopping techniques when I encountered Ben Nadel's post to reduce spam feature using Math (http://www.bennadel.com/blog/197-How-I-Stop-Spammers-On-My-ColdFusion-Blog.htm). While this method is not o…
Sometimes databases have MILLIONS of records and we need a way to quickly query that table to return the results me need. Sure you could use CFQUERY but it takes too long when there are millions of records. That is why SOLR was invented. Please …
This Micro Tutorial will give you a basic overview how to record your screen with Microsoft Expression Encoder. This program is still free and open for the public to download. This will be demonstrated using Microsoft Expression Encoder 4.
Established in 1997, Technology Architects has become one of the most reputable technology solutions companies in the country. TA have been providing businesses with cost effective state-of-the-art solutions and unparalleled service that is designed…

810 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