I have a simple form with selectOneMenu and textarea that I want to disable if certain value is chosen in the select (onchange event). How can I achieve this?

<p:selectOneMenu id="way" value="" onchange="">
    <f:selectItem value="0" itemLabel="#{texts.post}" />
    <f:selectItem value="1" itemLabel="#{texts.pickup}" />
</p:selectOneMenu>

<h:outputLabel for="address" value="#{texts.address}" />
<p:inputTextarea id="address" widgetVar="addressTextarea" value="" />

I have a simple form with selectOneMenu and textarea that I want to disable if certain value is chosen in the select (onchange event). How can I achieve this?

<p:selectOneMenu id="way" value="" onchange="">
    <f:selectItem value="0" itemLabel="#{texts.post}" />
    <f:selectItem value="1" itemLabel="#{texts.pickup}" />
</p:selectOneMenu>

<h:outputLabel for="address" value="#{texts.address}" />
<p:inputTextarea id="address" widgetVar="addressTextarea" value="" />

• javascript
• jsf
• primefaces

2 Answers 2

I don't think there is an open interface to do so for inputTextarea but you could get the clientId and disable the html textarea or use jquery to disable it pletely:

<p:selectOneMenu onchange="if(this.value == 1) { $(addressTextarea.input.attr('disabled', 'true)); $(addressTextarea.input.addClass('ui-state-disabled')) }">

Or using ajax you could use:

<p:selectOneMenu id="way" value="#{selectValue}">
    <f:selectItem value="0" itemLabel="#{texts.post}" />
    <p:ajax event="change" update="address"/>
</p:selectOneMenu>

<p:inputTextarea id="address" widgetVar="addressTextarea" value="" disabled="#{selectValue == 0}"/>

You can try this:

<p:inputTextarea id="address" widgetVar="addressTextareaWV" />

<p:selectOneMenu id="way" onchange="disableComponent()"/>

<script language="javascript" type="text/javascript">
    function disableComponent() {
        PF('addressTextareaWV').disable();
    }

    function enableComponent() {
        PF('addressTextareaWV').enable();
    }
</script>