在 JSF 中使用 bootstrap-toggle答案

【问题标题】：Using bootstrap-toggle with JSF在 JSF 中使用 bootstrap-toggle
【发布时间】：2016-11-27 06:34:10
【问题描述】：

我想在 JSF 中使用 bootstrap-toggle (http://www.bootstraptoggle.com/)。但是，它没有检测到复选框中的更改。这是我的示例（基于此答案Ajax render not working on SelectBooleanCheckbox）：

<h:form id="searchForm">
  <h:panelGroup id="searchPanel">    
    <h:selectBooleanCheckbox binding="#{searchCheckbox}" value="true" pt:data-toggle="toggle">
      <f:ajax render="searchForm:searchPanel" />
    </h:selectBooleanCheckbox>
    <h:panelGroup rendered="#{searchCheckbox.value}">
      aaa
    </h:panelGroup>
    <h:panelGroup rendered="#{not searchCheckbox.value}">
      bbb
    </h:panelGroup>
  </h:panelGroup>
</h:form>

如果我删除 pt:data-toggle="toggle" 它可以正常工作，并且在启用复选框时看到“aaa”，在禁用时看到“bbb”。但是，如果我不删除它，我会看到 On-Off 切换按钮，但当我更改值时，我总是会看到“aaa”。

知道如何解决这个问题吗？

【问题讨论】：

标签： ajax twitter-bootstrap jsf checkbox event-handling

【解决方案1】：

我终于找到了解决方案。问题是jsf创建的事件是onclick，它必须是onchange。它是这样工作的：

<h:form id="searchForm">
  <h:selectBooleanCheckbox binding="#{searchCheckbox}" value="true" pt:data-toggle="toggle">
    <f:ajax event="change" render="searchForm:searchPanel" />
  </h:selectBooleanCheckbox>
  <h:panelGroup id="searchPanel">
    <h:panelGroup rendered="#{searchCheckbox.value}">
      aaa
    </h:panelGroup>
    <h:panelGroup rendered="#{not searchCheckbox.value}">
      bbb
    </h:panelGroup>
  </h:panelGroup>
</h:form>

【讨论】：