Solved

cfselect checkbox in html form - how to dynamically disable?

Posted on 2011-03-01
10
932 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
[X]
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
  • 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
Forrester Webinar: xMatters Delivers 261% ROI

Guest speaker Dean Davison, Forrester Principal Consultant, explains how a Fortune 500 communication company using xMatters found these results: Achieved a 261% ROI, Experienced $753,280 in net present value benefits over 3 years and Reduced MTTR by 91% for tier 1 incidents.

 

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

Is Your DevOps Pipeline Leaking?

Is your CI/CD pipeline a hodge-podge of randomly connected tools? You’ve likely got a tool to fix one problem & then a different tool to fix another, resulting in a cluster of tools with overlapping functionality. Learn how to optimize your pipeline with Gartner's recommendations

Question has a verified solution.

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

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 …
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 …
In this video, viewers will be given step by step instructions on adjusting mouse, pointer and cursor visibility in Microsoft Windows 10. The video seeks to educate those who are struggling with the new Windows 10 Graphical User Interface. Change Cu…
Michael from AdRem Software outlines event notifications and Automatic Corrective Actions in network monitoring. Automatic Corrective Actions are scripts, which can automatically run upon discovery of a certain undesirable condition in your network.…

707 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