Control 3 elements with different ids with a single checkbox in visualforce page

Question

I have a visualforce page wherein I have to control two input boxes and one picklist field with a single checkbox. The idea is that input boxes must be both disabled when checkbox is selected, while input boxes must be enabled when checkbox is not selected. Also, with the same checkbox, picklist field must be enabled when checkbox is selected, while it must be disabled in default wherein checkbox is not selected.

I tried this with the first input box, and it is working. So I assigned same id to the second input box, but there's this error:

Duplicate ids have been detected

I know that ids per element must be unique, so I assigned another id to the second one.

As for the picklist field I am still not sure how since this is a different tag.

But how can I control these in a single checkbox while ids per input box differ?

Also, I would like to clarify that these three fields are all in one pageblockTable, but with different behavior based on the selection of checkbox.

portion in visualforce page

//portion to disable
<apex:inputText id="txt1" value="{!a.Text1__c}"  html-placeholder="0"/>
<apex:inputText id="txt2" value="{!a.Text2__c}"  html-placeholder="0"/> 
<apex:selectList id="re" value="{!a.Picklist__c}">
  //picklist values are controlled by a method in a controller                
  <apex:selectOptions value="{!picklistValues}"/> 
</apex:selectList> 


//checkbox portion
<apex:inputcheckbox id="Box" value="{!a.Box__c}"  onclick="disableText(this.checked, '{!$Component.frmId.pbId.pbSecId.pbTableId.txt1}');"/>

//javascript portion

<script>
   function disableText(value, inputId) {
     document.getElementById(inputId).disabled = value;
   }    
</script>

Answer 1

I see you're using javascript here which gives you other options other than just using the salesforce object Ids. You can use css style attributes that are applied to each of the objects along with their Ids which change their properties from disabled to enabled, active to inactive, visible, not visible, etc.

This is the approach I'd recommend you take. It may be easier if you wrap these components in divs that you apply the style classes to.

Using an inner and outer div might be the simplest way of doing this; one inner div that wraps around the two checkboxes and an outer div that wraps around the inner div plus the picklist. When the controlling checkbox is clicked it can change the styles applied to both of those divs; disabling/enabling the picklist while also enabling/disabling the checkboxes. Depending on how you scripted it, you'd likely want to make the inner classes children of the outer classes.

I have code someplace where I've done similar, but it's been several years, so I don't have it at hand to share. It was also done using jQuery which has features that are a bit more conducive to this particular task.