Selecting only from One of the Two Checkbox Groups (Report 10.1.2)

[gosoccer]

Hi everyone,
Once again, I need some help if you don't mind,

Please see the attachment. I have a spit screen but the user should be able
to select FROM only one of the two selections. The Left selection (State) or
the right selection (City)

In the past, thank you to Nimrod's sharing, I have a Gray-Out functionality
running using var RBPrompt=fW._oLstChoicesleft for listbox working perfectly.
I have a listbox on the left side and a Search/Select Box on the right side. If the user selects
a single value from the ListBox, the right Search/Select is disabled. Same
approach if the user selects a value for the right search and select screen.

But NOW, the two boxes on the right and left are Checkboxes with multiple
selection options. After establishing the same for these new boxes using the
HTML objects, they disabling function seems to be not working.

If someone quick check this logic and let me know about any recommendations
you may have, I'll greatly appreciate it.

Here is the code from Nimrod which I have to get it working for Checkboxes with multiple.

Code Select Expand

<script>
var fW = (typeof getFormWarpRequest == "function" ? getFormWarpRequest() : document.forms["formWarpRequest"]);


if ( !fW || fW == undefined)   
{
fW = ( formWarpRequest_THIS_ ? formWarpRequest_THIS_ : formWarpRequest_NS_ );
}
//get the SNS prompts' select list
var selectList=document.getElementById("snsPr").getElementsByTagName("select")[0];
var searchList=document.getElementById("RBPrompt").getElementsByTagName("select")[0];

//get the RB prompt
var RBPrompt=fW._oLstChoicesleft;

function checkIfPromptHasValue(fl){
ret=false;
if(fl==1){//the SNS prompt is clicked
if(selectList.selectedIndex>-1){
ret=true;
}
else{
ret=false;//you may have clicked, but you selected nothing
}

}
else{//RB Prompt is clicked
for(var i=0;i<RBPrompt.length;i++){
if(RBPrompt[i].selected){
ret=true;
break;
}

}
}
return ret;
}
function disableEnablePr(fl,dir){
if(fl==1){//selected prompt is SNS, need to disable RB
if(checkIfPromptHasValue(2)){//something is selected in RB Prompt
for(var i=0;i<RBPrompt.length;i++){
if(RBPrompt[i].selected){
RBPrompt[i].selected=dir?false:true;
break;
}
}
}
// RBPrompt.disabled=dir;
document.getElementById("RBPrompt").children[0].disabled=dir;

}
else{//RB Prompt is selected, SnS needs to be disabled
if(dir){selectList.selectedIndex=-1;}//unselect
document.getElementById("snsPr").children[0].disabled=dir;
document.getElementById("snsPr").getElementsByTagName("input")[1].disabled=dir;
document.getElementById("snsPr").getElementsByTagName("button")[0].disabled=dir;
}

}

function main(fl){

//check if a value is selected in the prompt
if(checkIfPromptHasValue(fl)){
//disable the other prompt
disableEnablePr(fl,true);

}
else{
disableEnablePr(fl,false);
}
}
document.getElementById("RBPrompt").onclick=function(){main(2);};
document.getElementById("snsPr").onclick=function(){main(1);};


</script>

Thx a lot guys. This forum is absolutely great and helpful :)

[gosoccer]

If using Checkbox Group is not doable to disable a checkbox as another 2nday checkbox is used, I'm thinking to go after
conditional rendering. The user would select City OR State in a drop down list and based on the selection, I can show the Block associated to the City or State. If anyone has a good article or work we have done in the past on Conditional Rendering to achieve such as a functionality, could you please share?

I'm trying the following to use a different approach in JS but not there yet.

Code Select Expand

var checkBoxSpanDivs=document.getElementById("myCheckBox").getElementsByTagName("div");
for(var i=0;i<checkBoxSpanDivs.length;i++){
if(checkBoxSpanDivs[i].className.indexOf("clsCheckBoxList")==0)
var checkBoxGr=checkBoxSpanDivs[i];

}

Thank you in advance for your time.

[Robl]

If someone selects a city then state is greyed out.
Does this mean they can't then change their mind and select a state?

Have you thought about a couple of conditional blocks based on a parent prompt, so the user selects either City or State and the block changes to show additional city prompts or state prompts.

With multi select prompts there's no nice way to have it autosubmit - so the user will have to press a button anyway.

[gosoccer]

Hi Robl,

I'm trying for find a good example for using "conditional blocks based on a parent prompt"
Yes, I think I can convince the client to go into this path.

Do you know of a good steps to take or example?

To answer your question, in the existing implementation for single selection value prompts, the "Deselect" Button allows
the disabling and enabling of the value prompts as the user decides to toggle between the two boxes.

Thank you in advance for your recommendation.

[Robl]

Just a prompt at the top of the page with City and State as option.
I'd probably use radio buttons as I think they look neat and tidy.

Then add the conditional block underneath taking up a chunk of the page.
Add the City details on one layer then the State details on another layer.

Job Done

[gosoccer]

Thank you Robl, :)
Would there be a refresh time whenever they choose City or State from the Drop Down List?

The city has a possible 1400 Rows to show.

It seems like the client is persistent in using the Enable and Disable functionality.

Debugging the code, I'm getting the following,

Code Select Expand

document.getElementById("snsPr").getElementsByTagName("input")[1].disabled=dir;
Unable to set property 'disabled' of undefined or null reference

[gosoccer]

Problem resolved.  :) :) 8)Sharing the code below for others facing the same issue.
In addition to Nimrod's wonderful work, the following really helped from Paul. This site (COGNOISE.COM) and the supporting folks are truly amazing especially for the people who are not getting support from training and other organizational backup.

Code Select Expand

<script>
var fW = (typeof getFormWarpRequest == "function" ? getFormWarpRequest() : document.forms["formWarpRequest"]);
if ( !fW || fW == undefined)   
{
fW = ( formWarpRequest_THIS_ ? formWarpRequest_THIS_ : formWarpRequest_NS_ );
}
//get the SNS prompts' select list
//var selectList=document.getElementById("snsPr").getElementsByTagName("select")[0];
//get the RB and snsPr prompts
var RBPrompt=fW._oLstChoicesOrgCheck;
var snsPr=fW._oLstChoicesSiteCheck;


function checkIfPromptHasValue(fl){
ret=false;
if(fl==1){//the SNS prompt is clicked
for(var i=0;i<snsPr.length;i++){
if(snsPr[i].checked){
ret=true;
break;
}

}

}
else{//RB Prompt is clicked
for(var i=0;i<RBPrompt.length;i++){
if(RBPrompt[i].checked){
ret=true;
break;
}

}
}
return ret;
}
function disableEnablePr(fl,dir){
if(fl==1){//selected prompt is SNS, need to disable RB
if(checkIfPromptHasValue(2)){//something is selected in RB Prompt
for(var i=0;i<RBPrompt.length;i++){
if(RBPrompt[i].checked){
RBPrompt[i].checked=dir?false:true;
break;
}
}
}
// RBPrompt.disabled=dir;
document.getElementById("RBPrompt").children[0].disabled=dir;
document.getElementById("RBPrompt").getElementsByTagName("input")[1].disabled=dir;


}
else{//RB Prompt is selected, SnS needs to be disabled
// if(dir){selectList.selectedIndex=-1;}//unselect
document.getElementById("snsPr").children[0].disabled=dir;
document.getElementById("snsPr").getElementsByTagName("input")[1].disabled=dir;
// document.getElementById("snsPr").getElementsByTagName("button")[0].disabled=dir;
}

}
function main(fl){

//check if a value is selected in the prompt
if(checkIfPromptHasValue(fl)){
//disable the other prompt
disableEnablePr(fl,true);
}
else{
disableEnablePr(fl,false);
}
}
document.getElementById("RBPrompt").onclick=function(){main(2);};
document.getElementById("snsPr").onclick=function(){main(1);};


</script>