Question

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

<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

使用disabled的{{1}}属性，如微小提到的，您可以使用它来控制此按钮的禁用/启用，您需要在{{<p:commandButton>中使用ajax调用1}}在您的bean中为此值<f:ajax>分配一个值并使用<h:selectOneRadio>属性并指定您的按钮ID后，将根据您的选择启用/禁用。

xhtml

中的

value="#{myBean.booleanVar}"

bean

中的

render

Answer 2

使用jquery和jsf执行此类任务的方法并不正确，因为＆＃34; 已禁用＆＃34; h:commandButton的属性可以达到目的。

你应该选择＆＃34; 禁用＆＃34;属性来实现这个功能。（正如Tiny在评论中所建议的那样）

但是，如果您强烈要求使用jquery执行此任务，则可以通过以下方式实现：

由于您要从cdn加载jquery，因此必须使用<script>标记来加载它。（但是在jsf <h:outputScript>建议从localsystem加载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" >和＆＃34; itemLabel ＆＃34; attribute accept字符串类型值。

所以你的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" />

jquery无法在JSF中启用/禁用命令按钮

2 个答案: