Is it possible to transform the next code to bootsfaces labels?
<div class="radio">
<label><input type="radio" name="optradio"/>Option 1</label>
</div>
<div class="radio">
<label><input type="radio" name="optradio"/>Option 2</label>
</div>
Thank you!
Update July 18, 2016: Inspired by your question, I've started to implement a <b:radiobutton />
component that's more flexible than its standard JSF counterpart. It will be published with the next version of BootsFaces - probably 1.0, which is due to JavaOne 2016. Until then, follow the recipe below.
We didn't implement <b:radioButton />
yet, but you can simulate it by adding a hidden input field and some JavaScript code:
<b:panel title="Survey" look="primary">
<p>Which Java version do you use?</p>
<div class="radio">
<label onclick="$('.hidden-optradio').val(7)">
<input type="radio" name="optradio" value="7" />
Java 7
</label>
</div>
<div class="radio">
<label onclick="$('.hidden-optradio').val(8)">
<input type="radio" name="optradio" value="8" />
Java 8
</label>
</div>
<h:inputText value="#{radiobuttonBean.javaVersion}" styleClass="hidden-optradio" pt:type="hidden" />
<script>$('input[name=optradio][value=#{radiobuttonBean.javaVersion}]').attr("checked", "checked");</script>
<b:commandButton value="submit your choice" action="#{radiobuttonBean.submit}" look="primary" />
<b:messages />
</b:panel>
If you need AJAX, implement it by adding a hidden <b:commandButton update="someRegion" onclick="ajax:myBean.myMethod()" />
and call the click()
method of this button in the onclick
handlers of the labels:
<label onclick="$('.hidden-optradio').val(8);$(.ajax-button).click();">
<input type="radio" name="optradio" value="8" />
Java 8
</label>
</div>
...
<b:commandButton value="submit your choice"
action="#{radiobuttonBean.submit}" look="primary"
update="@form"
style-class="hidden ajax-button"
/>