function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
MyGodItsColdMyGodItsCold 

how to set "apex:selectRadio disabled" in javascript?

I have an inputCheckbox, and a selectRadio tag in my VF page. The onclick for the inputCheckbox runs a javascript function to disable the radio button group when the checkbox is unchecked - but I can't seem to get it right. I have id's set for apex:page, apex:form, apex:inputCheckbox. When the onclick function runs, I can detect whether the checkbox is checked because I call

markDirty(this)

where this is the checkbox.

However, when I try:

document.getElementById("page:form:radio").disabled = true;

it's not working.

Obviously, javascript DOM is not my strength. Thanks,


mtbclimbermtbclimber
It's *always* best to avoid referring to component-generated DOM elements by Id if you can by leveraging $Component. Often this requires your function to take the ID of the element as an argument and use $Component to acquire it dynamically.  Do you have an example that shows what you are trying to accomplish?
GoForceGoGoForceGo
How does one use $Component when you are trying to access an id for table cell within a datatable/pageblocktable?

Or are you stuck with using hard coded id?
GoForceGoGoForceGo
I am using thePage:theForm:j_id2 below....even $Component.theForm.theTable doesn't work - only $Component.theForm works.

Seems like a bad hack...I am not sure if i can rely on j_id2 being the same for ever - when I modified some code, it ended up being j_id1.

Is there  a way of accessing the table component without this hack?

In the code below, I am using Javascript to make sure only one row can be marked primary distributor. The code where I am trying to create the element id sets the checkbox that was selected at initially (selectChkBox) . deSelectOther allows only one to be selected from there on...

Code:
<apex:page controller="selectPreferredDistributorsController" tabStyle="Distributor__c" id="thePage">
    <script>
       var selectedChkbox;
       var tableIdCount = 0;
       function deSelectOthers(chkBox) {
            if (chkBox.checked) {
                if ((chkBox != selectedChkbox) && (selectedChkbox != null)) {
                    selectedChkbox.checked = false;
                }
                selectedChkbox = chkBox;
            }            
        }
    </script>
    <apex:form id="theForm">
        <apex:sectionHeader title="Select Preferred Distributors" />
        <apex:pageBlock >
            <apex:pageBlockButtons >
                <apex:commandButton action="{!Save}" value="Save" />
                <apex:commandButton action="{!Cancel}" value="Cancel" />
            </apex:pageBlockButtons>
            <!-- show the Table with selection -->
            <apex:pageBlockTable value="{!PreferredDistributorWithSelects}" var="pd" id="theTable" frame="border">
                <apex:column headerValue="Select"> 
                    <apex:inputCheckBox value="{!pd.selected}">
                        <apex:actionSupport event="onclick" rerender="primaryCheckBox" action="{!uncheckPrimaryIfChecked}"/>
                    </apex:inputCheckBox>
                </apex:column>               
                <apex:column value="{!pd.pDistributor.name}" />
                <apex:column headerValue="Primary Distributor"> 
                    <apex:inputCheckBox value="{!pd.primary}" id="primaryCheckBox" disabled="{!NOT(pd.selected)}" onclick="deSelectOthers(this)" /> 
                    <script>
                        if ("{!pd.primary}" == "true") {
                            var idForSelectedBox = "thePage:theForm:j_id2:theTable:"+tableIdCount+":primaryCheckBox";
                             selectedChkbox = document.getElementById(idForSelectedBox);
                         }
                         tableIdCount++;
                    </script>                         
                </apex:column> 
            </apex:pageBlockTable>
        </apex:pageBlock>
 </apex:form>
</apex:page>