Javascript 使用javascript基于JSF复选框启用/禁用JSF命令按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3566695/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JSF command button enable/disable based on JSF check box using javascript
提问by Avinash Nandagiri
I am using RichFaces and I want to enable/disableh:commandButtonbased on h:selectBooleanCheckboxusing Javascript. By default the button should be disabled and check box unchecked. The button should be enabled when the check box is selected and disabled when the check box is deselected.
我正在使用 RichFaces，我想根据使用 Javascript启用/禁用。默认情况下，按钮应该被禁用并且复选框被取消选中。选中复选框时应启用该按钮，取消选中复选框时应禁用该按钮。h:commandButtonh:selectBooleanCheckbox
Any help would be greatly appreciated.
任何帮助将不胜感激。
回答by Hanynowsky
As stated by Dmitry from Openfaces, Enabling/Disabling a faces components (Primefaces, Openfaces, Richfaces...etc) must be done on server side. A better solution is henceforth to use ajax when a change event is fired! onchange event is suitable for this situation (imagine the checkbox is checked/unchecked using Keyboard for example)!
正如来自 Openfaces 的 Dmitry 所述，启用/禁用面部组件（Primefaces、Openfaces、Richfaces...等）必须在服务器端完成。一个更好的解决方案是在触发更改事件时使用 ajax！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}" />
This way, when the checkbox is unchecked, the command Button is disabled, but when checked the button is enabled.
这样，当复选框未选中时，命令按钮被禁用，但选中时按钮被启用。
In the case of Primefacesusing <p:ajax />is recommended!
在的情况下Primefaces使用<p:ajax />推荐！
<p:ajax event="change" process="box" update="but"/>
In case of OpenFaces, both <f:ajax />and <o:ajax />work fine.
在以下情况下OpenFaces，都<f:ajax />和<o:ajax />做工精细。
And if you have multiple components to render at the same time, juste include their ids, space separated :
如果您有多个组件要同时渲染，请包含它们的 id，空格分隔：
<f:ajax ......render="id1 id2 id3" />
回答by Maxim Manco
To achieve this you can use a4j:supportto attach ajax submission on a specific event that occur on the checkbox. e.g. onclick.
为此，您可以使用a4j:support在复选框上发生的特定事件上附加 ajax 提交。例如点击。
Here is a simple example:
这是一个简单的例子：
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
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>
Or use the client approach without submission:
或者使用客户端方法而不提交：
XHTML
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>
In this case the disabledattribute should not be set on the h:commandButton. Otherwise, changes on the client side using js will no affect the JSF tree.
在这种情况下，disabled不应在h:commandButton. 否则，客户端使用 js 的更改将不会影响 JSF 树。
回答by Jigar Joshi
Ultimately it will be converted to HTML
最终它将被转换为 HTML
If you are using RichFaces it will generate random id for component, so you need to specify id for component
如果您使用 RichFaces，它将为组件生成随机 id，因此您需要为组件指定 id
Then simply play with HTML& JavaScript to achieve what you want.
然后简单地使用 HTML 和 JavaScript 来实现你想要的。
回答by Renan
<h:form id="myForm">
<h:selectBooleanCheckbox id="check" onclick="document.getElementById('myForm:myButton').disable = !this.checked"/>
<h:commandButton id="myButton" .../>
</h:form>
I'm not sure if "this.checked" will work.. if not try:
我不确定“this.checked”是否会起作用..如果不尝试：
onclick="document.getElementById('myForm:myButton').disable = !document.getElementById('myForm:check').checked"
Or a simple jsFunction...
或者一个简单的jsFunction...
<script type="text/javascript">
function checkClick(check) { document.getElementById('myForm:myButton').disable = check.checked; }
</script>
(...)
<h:selectBooleanCheckbox id="check" onclick="checkClick(this)"/>
(...)
