Getting Reference To CheckBox From ui:repeat In JavaScript Code

Question

I have the following code snippet in a JSF 2.0 application:

<ui:repeat var="applicantTypes" value="#{lookupHelper.applicantTypes}">
    <h:selectBooleanCheckbox styleClass="applicantType"
        value="#{requestBeanDtoProxyMB.requestInstance.subsidyRequest.
        applicantTypesMap[applicantTypes.id]}">

    </h:selectBooleanCheckbox>
</ui:repeat>

The list applicantTypes is fetched from the database, and the HashMap applicantTypesMap has the data type Map<long, boolean> where the key is the id from applicantTypes

The code depends on a list that fetches values from a database, and it contains 3 items (the database contains 3 records only)

What I would like to do is get a reference to one of these 3 items so I can hide it using JavaScript based on a certain condition. I know how to hide the UI element using JavaScript using it's id, my problem is that the id is generated dynamically so I can't possibly use it to hide the checkbox

So is there a way to get a reference to this checkbox in JavaScript code? Or is there a way to hide this checkbox without needing its id to do so?

Answer 1

What I would like to do is get a reference to one of these 3 items so I can hide it using JavaScript based on a certain condition.

there are many ways to hide a html element using JSF itself or javascript/JQuery!

JSF-Components have an attribute named "rendered", use it if it fits your needs.

to hide an Element using JavaScript/Jquery, you only need to add a style-class to that Element, then use JQuery class Selector to manage that element (or you do that with plain JavaScript):

<ui:repeat var="applicantTypes" value="#{lookupHelper.applicantTypes}">
    <h:selectBooleanCheckbox styleClass="applicantType SOME-CLASS#{applicantTypes.id}"
        value="#{requestBeanDtoProxyMB.requestInstance.subsidyRequest.
        applicantTypesMap[applicantTypes.id]}">

    </h:selectBooleanCheckbox>
</ui:repeat>

Look at this styleClass="applicantType SOME-CLASS#{applicantTypes.id}" this will prints(example) ...class="applicantType SOME-CLASS1"...

now using JQuery to hide that element:

$('.SOME-CLASS1').hide();