jquery不适用于在JSF中启用/禁用命令按钮[重复]

Question

这是我的查询。我正在为许可协议页面设计 UI（在 JSF 中），其中“下一步”按钮将根据用户接受或拒绝许可协议的选择启用或禁用。接受和拒绝按钮是单选按钮。我为此使用jquery。这是jquery sn-p：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
    $('#pg2\\:accept').click(function() {
        alert("hello");
        if ($(this).is(':checked'))
            $('#next').removeAttr('disabled');
        else
            $('#next').attr('disabled', 'disabled');    
    });
    }
</script>

这是我的 JSF 代码：

<h:panelgroup id="pg2">
    <h:selectOneRadio id="radios" layout="pageDirection">
        <f:selectItem id="accept" itemValue="#{true}" itemLabel=ACCEPT/>
        <f:selectItem id="decline" itemValue="#{false}" itemLabel=DECLINE/>
    </h:selectOneRadio>
</h:panelGroup>

<h:commandButton id="next" action="welcome" value="Next" widgetVar="nxt" />

编辑：用 Jsf 组件替换 primefaces 组件，因为我不能在我的代码中使用 primefaces

Answer 1

使用tiny提到的<p:commandButton>的disabled属性，您可以使用它来控制此按钮的禁用/启用，您需要在为<h:selectOneRadio>分配值后使用<f:ajax>中的ajax调用在你的 bean 中像这样 value="#{myBean.booleanVar}" 并使用 render 属性并分配你的按钮的 ID，它将根据你的选择启用/禁用。

在您的 xhtml

中

<h:panelGroup id="pg2">
    <h:selectOneRadio id="radios" value="#{myBean.disableButton}" layout="pageDirection">
        <f:selectItem id="accept" itemValue="#{true}" itemLabel="ACCEPT"/>
        <f:selectItem id="decline" itemValue="#{false}" itemLabel="DECLINE"/>
        <f:ajax render="next" execute="@this"/>
    </h:selectOneRadio>
</h:panelGroup>
<h:commandButton id="next" action="welcome" value="Next" widgetVar="nxt" disabled="#{!myBean.disableButton}"/>

在豆

private boolean disableButton;

// setter / getter

public boolean isDisableButton() {
    return disableButton;
}

public void setDisableButton(boolean disableButton) {
    this.disableButton = disableButton;
}

Answer 2

将 jquery 与 jsf 一起用于此类任务是不正确的方法，因为 h:commandButton 的“disabled”属性可以达到目的。

您应该使用“disabled”属性来实现此功能。（正如 Tiny 在 cmets 中建议的那样）

但是，如果您强烈要求使用 jquery 来完成此任务，那么您可以通过以下方式实现它：

由于您是从 cdn 加载 jquery，您必须使用 <script> 标签来加载它。 （但在 jsf 中<h:outputScript> 建议从本地系统加载 jquery）并使用<h:outputScript> 编写自定义脚本。

加载 jquery 和自定义脚本如下：

<h:head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<h:outputScript>
    $(document).ready(function() {
        $('#next').attr('disabled', 'disabled'); 
        $("input:radio[value='true']").click(function() {
            $('#next').removeAttr('disabled');
        });
        $("input:radio[value='false']").click(function() {
            $('#next').attr('disabled', 'disabled');   
        });
     });
</h:outputScript>
</h:head>

您的<h:panelgroup id="pg2"> 中有错字，应该是<h:panelGroup id="pg2" >，并且“itemLabel”属性接受字符串类型值。

所以你的 jsf 代码是：

<h:panelGroup id="pg2">
   <h:selectOneRadio id="radios" layout="pageDirection">
       <f:selectItem id="accept" itemValue="#{true}" itemLabel="ACCEPT"/>
       <f:selectItem id="decline" itemValue="#{false}" itemLabel="DECLINE"/>
   </h:selectOneRadio>
</h:panelGroup>

<h:commandButton id="next" action="welcome" value="Next" widgetVar="nxt" />