Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

cfselect checkbox in html form - how to dynamically disable?

Posted on 2011-03-01
10
925 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!

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.

 

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

PROBLEM:  How to open a cfwindow or run a function on double click of a cfgrid row. One of my clients wanted to be able to double click on a row item to get more detailed information about a transaction and to be able to modify the line items i…
CFGRID Custom Functionality Series -  Part 1 Hi Guys, I was once asked how it is possible to to add a hyperlink in the cfgrid and open the window to show the data. Now this is quite simple, I have to use the EXT JS library for this and I achiev…
With Secure Portal Encryption, the recipient is sent a link to their email address directing them to the email laundry delivery page. From there, the recipient will be required to enter a user name and password to enter the page. Once the recipient …
Finds all prime numbers in a range requested and places them in a public primes() array. I've demostrated a template size of 30 (2 * 3 * 5) but larger templates can be built such 210  (2 * 3 * 5 * 7) or 2310  (2 * 3 * 5 * 7 * 11). The larger templa…

856 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