Question

Here is my html code.

        <table >
            <tr>
                <th rowspan="3">
                        <h:selectOneRadio layout="pageDirection"
                        onClick="alert('selam')" id="selectOneRadio">
                        <f:selectItem itemValue="Categori" itemLabel="Radio 1" />
                        <f:selectItem itemValue="Service" itemLabel="Radio 2" />
                        <f:selectItem itemValue="Follower" itemLabel="Radio 3" />
                    </h:selectOneRadio>
                </th>
                <td>
                <h:inputText value="inputText 1" />
                </td>
            </tr>
            <tr>
                <td>
                <h:inputText value="inputText 2" />
                </td>
            </tr>
            <tr>
                <td>
                <h:inputText value="inputText 3" />
                </td>
            </tr>               

        </table>

I want to Select One of the radioButtons. When I click one of them I want the inputText be disabled.

For example:

• İf I click Radio 1 , then input Text 1 will be disabled.
• İf I click Radio 2 , then input Text 2 will be disabled.
• İf I click Radio 3 , then input Text 3 will be disabled.

How can I do this?

Answer 1

Bind the radio button value to a managed bean property and use <f:ajax> to send an ajax request and update parts of the view when the radio button changes and use disabled attribute to disable the <h:inputText> depending on the selected radio button item value.

E.g.

<h:panelGroup id="inputs">
    <table>
        <tr>
            <th rowspan="3">
                <h:selectOneRadio value="#{bean.radio}" layout="pageDirection">
                    <f:selectItem itemValue="Categori" itemLabel="Radio 1" />
                    <f:selectItem itemValue="Service" itemLabel="Radio 2" />
                    <f:selectItem itemValue="Follower" itemLabel="Radio 3" />
                    <f:ajax render="inputs" />
                </h:selectOneRadio>
            </th>
            <td>
                <h:inputText value="#{bean.input1}" disabled="#{bean.radio == 'Categori'}" />
            </td>
        </tr>
        <tr>
            <td>
                <h:inputText value="#{bean.input2}" disabled="#{bean.radio == 'Service'}" />
            </td>
        </tr>
        <tr>
            <td>
                <h:inputText value="#{bean.input3}" disabled="#{bean.radio == 'Follower'}" />
            </td>
        </tr>               
    </table>
</h:panelGroup>

with

@ManagedBean
@ViewScoped
public class Bean {

    private String radio;
    private String input1;
    private String input2;
    private String input3;

    // ...
}