CSJS doesn't update property that was set by SSJS

Question

Here is (Yes/No) radio button onChange event CSJS that disables/enables another 'inputOtherRadio' radio button. And it works perfect:

rObj = dojo.query("[id$=':inputOtherRadio']");
if(thisEvent.target.value=="Y"){
    rObj.disabled = true;
} else {
    rObj.disabled = false;
}

But if I set xPage 'inputOtherRadio' component Disable property = true then the code above doesn't work (it doesn't undisable ...)

<xp:radioGroup id="inputOtherRadio" disabled="true">
    <xp:selectItem itemLabel="Yes" itemValue="Y" id="selectItem11"></xp:selectItem>
    <xp:selectItem itemLabel="No" itemValue="N" id="selectItem12"></xp:selectItem>
</xp:radioGroup>

How to make CSJS code work for disabled component?

Solely explanation, but it may help you or someone work out what the answer should be. I suspect that because the radio group has the disabled property set to true, it's passed to the browser initially as disabled. The CSJS code itself is working still, but the eventHandler doesn't trigger, because the component is disabled, so shouldn't be clickable. — Paul Stephen Withers

Knut Herrmann Knut Herrmann · Accepted Answer · 2016-05-05T18:53:30

Change your CSJS code in first radio button to

<xp:radioGroup id="mainRadio" defaultValue="N">
    <xp:selectItem itemLabel="Yes" itemValue="Y"></xp:selectItem>
    <xp:selectItem itemLabel="No" itemValue="N"></xp:selectItem>
    <xp:eventHandler event="onclick" submit="false">
        <xp:this.script><![CDATA[return false;]]></xp:this.script>
    </xp:eventHandler>
    <xp:eventHandler event="onchange" submit="false">
        <xp:this.script><![CDATA[
            options = dojo.query("[name$=inputOtherRadio]");
            for(i=0; i < options.length; i++) {
                if(thisEvent.target.value=="N"){    
                   options[i].disabled = true;
                } else {
                   options[i].disabled = false;
                }
            }
        ]]></xp:this.script>
    </xp:eventHandler>
</xp:radioGroup>

The radio button control gets rendered to

and as you can see the disabled property is assigned to input elements "Yes" and "No" and not to the whole radio button control. That's why you have to set disabled property for every option.

CSJS doesn't update property that was set by SSJS

1 Answers