css - ラジオボタンがトグルしない

Question

次のように、ブートストラップ トグル ボタンのようにスタイル設定されたラジオ ボタンがあります。

<h:panelGroup>
    <div id="sortButtons" class="btn-group" data-toggle="buttons-radio">
        <h:commandButton type="button" styleClass="btn btn-inverse active" value="Price"><f:ajax listener="#{searchResultsRoundtripBean.sortByPrice}"/></h:commandButton>
        <h:commandButton type="button" styleClass="btn btn-inverse" value="Departure"><f:ajax listener="#{searchResultsRoundtripBean.sortByTime}"/></h:commandButton>
    </div>
</h:panelGroup>

スタイリングはうまく見えます。これがそのイメージです: http://imgur.com/W1ewjCA

ただし、問題は、ボタンをクリックしても切り替えられないことです。それらに接続されたイベントは発生しますが、切り替えられません。私はここでばかげたことをしていますか、それとも私が気付いていない警告がありますか?