Кнопка команды JSF включить / отключить на основе флажка JSF с использованием JavaScript

Question

Я использую RichFaces и хочу включить / отключить h:commandButton на основе h:selectBooleanCheckbox с использованием Javascript По умолчанию кнопка должна быть отключена, а флажок снят. Кнопка должна быть включена, когда флажок установлен, и отключена, если флажок снят.

Любая помощь будет принята с благодарностью.

Answer 1

Как заявил Дмитрий из Openfaces, включение / отключение компонентов лица (Primefaces, Openfaces, Richfaces и т. Д.) Должно выполняться на стороне сервера. Лучшее решение - использовать ajax при запуске события change! Событие onchange подходит для этой ситуации (представьте, что флажок установлен / снят, например, с клавиатуры)!

<h:selecBooleanCheckbox id="box" value="#{mybean.selecteditem.booleanvalue}"......>
<f:ajax execute="box" render="but" event="change" />
</h:selectBooleanCheckbox>

<h:commandButton id="but" action="someAction" value="someValue" disabled="#{!mybean.selecteditem.booleanvalue}" />

Таким образом, когда флажок снят, командная кнопка отключена, но если флажок установлен, кнопка включена.

В случае Primefaces рекомендуется использовать <p:ajax />!

<p:ajax event="change" process="box" update="but"/>

В случае OpenFaces оба <f:ajax /> и <o:ajax /> работают нормально.

И если у вас есть несколько компонентов для рендеринга одновременно, просто укажите их идентификаторы, разделенные пробелом:

<f:ajax ......render="id1 id2 id3" />

Answer 2

Для этого вы можете использовать a4j:support, чтобы прикрепить ajax-отправку к определенному событию, которое происходит в флажке. например OnClick.

Вот простой пример:

Bean

public class TestBean {

    private boolean chkBoxChecked;

    public boolean isChkBoxChecked() {
        return chkBoxChecked;
    }

    public boolean isBtnDisabled() {
        return !this.chkBoxChecked;
    }

    public void setChkBoxChecked(boolean chkBoxChecked) {
        this.chkBoxChecked = chkBoxChecked;
    }

}

XHTML

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich"
    template="/WEB-INF/template/default.xhtml">

    <ui:define name="content">
        <h:form id="frmTest">
            <h:selectBooleanCheckbox id="chkBoolean" value="#{testBean.chkBoxChecked}">
                <a4j:support event="onclick" ajaxSingle="true" reRender="btnSubmit"/>
            </h:selectBooleanCheckbox>
            <h:commandButton id="btnSubmit" value="Submit" disabled="#{testBean.btnDisabled}"/>
        </h:form>
   </ui:define>
</ui:composition>

Или используйте клиентский подход без представления:

XHTML

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich"
    template="/WEB-INF/template/default.xhtml">

    <ui:define name="head">
        <script type="text/javascript">
            window.onload = function() {
                btnSubmit = document.getElementById('btnSubmit');
                btnSubmit.disabled = #{testBean.btnDisabled};
            }
        </script>
    </ui:define>

    <ui:define name="content">
        <h:form id="frmTest" prependId="false">
            <h:selectBooleanCheckbox id="chkBoolean"
                onclick="btnSubmit.disabled = !this.checked;" 
                value="#{testBean.chkBoxChecked}"/>
            <h:commandButton id="btnSubmit" value="Submit"/>
        </h:form>
    </ui:define>
</ui:composition>

В этом случае атрибут disabled не должен быть установлен на h:commandButton. В противном случае изменения на стороне клиента с использованием js не повлияют на дерево JSF.

Answer 3

<h:form id="myForm">
   <h:selectBooleanCheckbox id="check" onclick="document.getElementById('myForm:myButton').disable = !this.checked"/>

   <h:commandButton id="myButton" .../>
</h:form>

Я не уверен, будет ли работать this.checked .. если не попробует:

onclick="document.getElementById('myForm:myButton').disable = !document.getElementById('myForm:check').checked"

Или простая функция jsFunction ...

<script type="text/javascript">
   function checkClick(check) { document.getElementById('myForm:myButton').disable = check.checked; }
</script>
(...)
<h:selectBooleanCheckbox id="check" onclick="checkClick(this)"/>
(...)

Answer 4

В конечном итоге он будет преобразован в HTML

Если вы используете RichFaces, он сгенерирует случайный идентификатор для компонента, поэтому вам нужно указать идентификатор для компонента

Затем просто поиграйте с HTML и JavaScript, чтобыдостичь того, что вы хотите.