CODEWITHSUNDEEP
jsfprimefaces
Nikos Krous
Nikos Krous

Reputation: 29

How to change enable/disable a <p:calendar> and an <p:inputTextarea> when a <p:selectBooleanCheckbox> is checked or not, using primefaces?

I have this part of code:

<!-- /row -->
    <div class="row" style="margin-top: 15px">
        <div class="span8">
            <div class="control-group">
                <label class="hcg-control-label span5">Ημερομηνία Ανάκλησης Ποινής</label>
                <div class="controls span7">
                    <p:calendar id="recallDate" styleClass="hcg-full-width cursor-pointer" pattern="dd/MM/yyyy"
                                value="#{penaltiesView.penalty.recallDate}" disabled="true"/>
                    <i class="fa fa-calendar hcg-input-icon"></i>
                </div>
            </div>
        </div>
        <!-- /span -->
    </div>
    <!-- /row -->
    <div class="row" style="margin-top: 15px">
        <div class="span8">
            <div class="control-group">
                <label class="hcg-control-label span5">Σχόλια Ανάκλησης Ποινής</label>
                <div class="controls span7">
                    <p:inputTextarea rows="6" id="recallComments" styleClass="hcg-full-width" value="#{penaltiesView.penalty.recallComments}" disabled="true"/>
                </div>
            </div>
        </div>
        <!-- /span -->
    </div>
    <!-- /row -->
    <div class="row">
        <div class="span8">
            <div class="control-group">
                <label class="hcg-control-label span5">Ανάκληση - Ολοκλήρωση Πειθαρχικής Ποινής</label>
                <div class="controls span7">
                    <p:selectBooleanCheckbox id="RevocationOrCompletion" styleClass="hcg-checkbox margin-bottom-10" value="#{penaltiesView.penalty.revocationOrCompletion}" disabled="#{!penaltiesView.canEdit()}" >
                        <p:ajax event="change" update="recallDate,recallComments"/>
                    </p:selectBooleanCheckbox>
                </div>
            </div>
        </div>
        <!-- /span -->
    </div>

which produces the following components: enter image description here

Now, what I want to do, is to make the calendar component and the Textarea to get enabled when I check the checkBox and if I uncheck it, they must be disabled again. The use of javascript due to requirements is not a valid way. I am having some difficulties on how to make this happen. Any suggestions are appreciated. Thank you in advance.

Upvotes: 0

Views: 879

Answers (1)

korbn
korbn

Reputation: 52

Your elements can't be updated because you have in your code disabled=true for calendar and textArea. If you want to change disable parameter depending on boolean checkbox than disabled value needs to be a value of boolean checkbox. Your boolean field also needs to have geters and setters.

<p:calendar id="recallDate" styleClass="hcg-full-width cursor-pointer" pattern="dd/MM/yyyy"
                            value="#{penaltiesView.penalty.recallDate}" disabled="#{penaltiesView.penalty.revocationOrCompletion}"/>
<p:inputTextarea rows="6" id="recallComments" styleClass="hcg-full-width" value="#{penaltiesView.penalty.recallComments}" disabled="#{penaltiesView.penalty.revocationOrCompletion}"/>

<p:selectBooleanCheckbox id="RevocationOrCompletion" styleClass="hcg-checkbox margin-bottom-10" value="#{penaltiesView.penalty.revocationOrCompletion}" disabled="#{!penaltiesView.canEdit()}" >
                    <p:ajax update="recallDate recallComments" process="@this"/>
</p:selectBooleanCheckbox>

Upvotes: 1

Related Questions