How can I set border to panelGroup through selectedBooleanCheckBox - jsf

Question

I have selectBooleanCheckbox and h:panelGroup in xhtml page. I want set the border to panelGroup when box value is checked
Here the code:
<p:fieldset legend="Параметры печати" style="margin:0px; margin-top: 0px; padding-bottom: 0px; border: 1px solid" >
<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
<p:selectBooleanCheckbox value="#{priceListUI.borderCheck}" />
<h:outputText value="Border" />
</p:fieldset>
and <h:panelGroup>, i need set border to external block:
<h:panelGroup styleClass="ui-g-5 box"
style="padding: 15px; border: solid 1px; font-size: 16px;height: 202px;min-width:340px; position: relative">
<h:panelGroup style="height:44px; line-height: 1.4em">
<p>#{product.product.name}</p>
</h:panelGroup>
<h:panelGroup styleClass="ui-g" id="svg" style="width: 100%; display: block;">
<svg class="barcode bc-#{product.productId}"
style="position: absolute;right: 20px; top: 80px;"
jsbarcode-textmargin="0"
jsbarcode-fontoptions="bold">
</svg>
</h:panelGroup>
<h:panelGroup style="height: 20px; display: inline; position: absolute; bottom: 15px;">
Цена: #{util.fDouble(product.product.type eq 2? product.sellingPrice * 1000.0: product.sellingPrice)} тг
</h:panelGroup>
<script>
draw('#{product.product.code}', #{product.productId});
function draw(code, productId) {
var arr = {
displayValue: true,
fontSize: 16,
height: 24
};
if (code.length === 8 || code.length === 13) {
arr["format"] = "EAN" + code.length;
}
var className = ".bc-" + productId.toString();
JsBarcode(className, code, arr);
}
</script>
</h:panelGroup>
In Bean class there are getters and setters for checkbox
Can anyone help?

Answer 1

You can use the styleClass attribute on you panelgrid, and set the class according to the checkbox boolean value.
Example:
<h:head>
<style type="text/css">
.myBorderClass {
border: #000000 solid 10px;
}
</style>
</h:head>
<f:view>
<h:form>
<p:selectBooleanCheckbox value="#{myBean.check}">
<p:ajax update="grid"/>
</p:selectBooleanCheckbox>
<h:panelGrid id="grid" styleClass="#{myBean.check ? 'myBorderClass':''}">
<h:outputLabel>
test label
</h:outputLabel>
</h:panelGrid>
</h:form>
</f:view>