Question

我有一个表单，我需要有一个看起来像bootstrap切换按钮的单选按钮。我通过使用按钮组中的命令按钮并设置属性data-toggle="buttons-radio"来实现这一点，如下所示：

<div id="flightChoiceButtons" class="btn-group" data-toggle="buttons-radio">
    <h:commandButton type="button" styleClass="btn btn-inverse" value="One Way"><f:ajax render="flexibleDates" listener="#{searchFlightsBean.setDirectionOneWay}"/></h:commandButton>
    <h:commandButton type="button" styleClass="btn btn-inverse" value="Round Trip"><f:ajax render="flexibleDates" listener="#{searchFlightsBean.setDirectionRoundtrip}"/></h:commandButton>
</div>

我现在遇到的问题是我需要选择“往返”按钮，或者在页面加载时处于关闭状态。我不需要触发按钮的ajax调用，因为页面上显示的数据已经处于需要处于的状态。

有人有什么想法吗？

如果需要更多信息，我很乐意提供。

Answer 1

引导按钮的活动状态由active样式类的标识来标识。知道了，你可以让JSF有条件地打印样式类。你的模型的设置方式还不清楚，所以这里只是一个启动示例，前提是你有#{searchFlightsBean.direction}属性返回枚举。

<h:commandButton ... styleClass="btn btn-inverse #{searchFlightsBean.direction == 'ONE_WAY' ? 'active' : ''}">...</h:commandButton>
<h:commandButton ... styleClass="btn btn-inverse #{searchFlightsBean.direction == 'ROUND_TRIP' ? 'active' : ''}">...</h:commandButton>

您可以用任何其他布尔条件替换#{searchFlightsBean.direction == '...'}部分。您可以在此答案中找到示例：Conditionally displaying JSF components。

将命令按钮设置为默认选中

1 个答案: