禁用命令按钮,直到勾选复选框

时间:2014-04-09 15:10:24

标签: javascript jquery jsf jsf-2

我知道这个probs非常简单,但我发现的所有答案都涉及使用javascript,我想知道是否有更好的方法来实现它。

我想要禁用确认按钮,直到勾选上面的复选框,我该怎么做,然后如果勾选并且未勾选那么它又会被禁用

<p:selectBooleanCheckbox  id="Markconfirm"
                                              value="#{markingBean.markToEdit.markingCompleted}"/>


                </p:panelGrid>
                <p:button id="back"
                          value="back"
                          outcome="/cohort-coordinator/marking/view-all-marks"
                          icon="ui-icon-arrowthickstop-1-w"/>

                <p:commandButton id="confirm"
                                 value="Confirm"
                                 actionListener ="#{markingBean.editMark}"
                                 update=":growl"
                                 icon="ui-icon-disk"/>

2 个答案:

答案 0 :(得分:2)

向您的checkbok添加ajax事件,以禁用或启用您的boutton。

<p:selectBooleanCheckbox  id="Markconfirm" value="#{markingBean.markToEdit.markingCompleted}">
    <p:ajax event="change" update="confirm" /> 
 </p:selectBooleanCheckbox>


 <p:commandButton id="confirm"
                             value="Confirm"
                             disabled="#{markingBean.markToEdit.markingCompleted}"
                             actionListener ="#{markingBean.editMark}"
                             update=":growl"
                             icon="ui-icon-disk"/>    

答案 1 :(得分:0)

通过Javascript进行下一步: 将widgetVar添加到<p:commandButton>,我们称之为confirmButtonWV

<p:commandButton widgetVar="confirmButtonWV" disabled="true" id="confirm" value="Confirm" actionListener ="#{markingBean.editMark}" update=":growl" icon="ui-icon-disk"/>

和您的复选框的widgetVar,我们称之为markConfirmWV

<p:selectBooleanCheckbox widgetVar="markConfirmWV" id="Markconfirm" value="#{markingBean.markToEdit.markingCompleted}" />

然后使用下一个脚本:

 <script>
 $(document).ready(function() {
     markConfirmWV.jq.on('click', function() {
         var confirmButton = confirmButtonWV.jq;
         if (confirmButton.is(":disabled")) {
              confirmButton.removeAttr('disabled').removeClass('ui-state-disabled');
         } else {
              confirmButton.attr('disabled', 'disabled').addClass('ui-state-disabled');
         }
     });
 });
 </script>