Javascript 禁用复选框上的按钮单击

我有一个xhtml页面，其中可以有0到6个相互独立的复选框。我想确保当所有这些都被选中时，submit按钮被启用。假设有3个复选框，只有在单击这3个复选框时，提交按钮才必须启用。在JSF/Javascript中寻找解决方案。

这为您提供了一个非常有价值的示例：以及大量可复制的代码。

假设复选框位于名为form1的表单中：

var inputs = document.body.form1.getElementsByTagName('input');
var checks = [];
for(var control in inputs){
   if(inputs[control].getAttribute('type') == 'checkbox'){
      checks.push(inputs[control]);
   }
}
//now you have all the checkboxes in a global array checks;

var checkIfCanSubmit = function(){
   var totalChecksChecked = 0;
   for(var i = 0; i < checks.length; i++){
      if(checks[i].checked){
         totalChecksChecked++;
      }
   }
   if(totalChecksChecked == checks.length){
      document.getElementById('yourSubmitButton').disabled = false;
   } else {
      document.getElementById('yourSubmitButton').disabled = true;
   }
}

//then you attribute the event change to every checkbox
for (var i = 0; i < checks.length; i++){
   checks[i].addEventListener('change', checkIfCanSubmit, 1);
}

var inputs=document.body.form1.getElementsByTagName（'input'）；
var检查=[]；
用于（输入中的var控制）{
如果（输入[control].getAttribute（'type'）=='checkbox'）{
检查。推送（输入[控制]）；
}
}
//现在，您拥有全局数组检查中的所有复选框；
var checkIfCanSubmit=函数（）{
var totalChecksChecked=0；
对于（变量i=0；i

下面是我想到的代码，JSF/Seam没有一个干净的解决方案来实现复选框，事实上JSF本身就像天上的钻石。Groovy更轻、更干净。我花了一个小时才弄明白，使用JQuery，这本应该更快更简单，但这将是我未来的重构工作。感谢安德烈和穆格。是时候把重点放在将这个问题与CXF Web服务集成上了。我已经尽可能地清理并发布了解决方案，如果有任何错误，我很抱歉，任何java孩子都应该能够找出错误

Andrey：对于任何常规应用程序，您的解决方案都很好，只是当JSF组件呈现为HTML时，组件树会生成很多输入复选框，对于6个输入复选框，组件树会生成170，这要感谢JSF。难怪太阳的股票卖完了

<h:form id="cbrRulesForm">
    <a4j:region id="googleCompeteRules">

        <s:div id="cbrRules">
            <div style="height:100px;">
                <div class="section-right">
                    <div>                            
                        <s:label styleClass="name" rendered="#{actionBean.ruleResult[0].equalsIgnoreCase('FAIL')}" style="margin-top: -40px;padding-left: 250px;">
                                 <h:selectBooleanCheckbox id="waiveRuleCheck1" value="#{actionBean.waiveRule1Checked}" disabled="#{!identity.hasRole('Agent')}">
                                    <a4j:support event="onclick"  action="#{actionBean.showButton()}" ajaxSingle="true" reRender="googleCompeteSubmitId"/>
                                 </h:selectBooleanCheckbox>
                             Waived</s:label>
                    </div>

                    <div>
                             <s:label styleClass="name" rendered="#{actionBean.ruleResult[1].equalsIgnoreCase('FAIL')}" style="margin-top: -52px;padding-left: 250px;">
                                         <h:selectBooleanCheckbox id="waiveRuleCheck2" value="#{actionBean.waiveRule2Checked}" >
                                            <a4j:support event="onclick" action="#{actionBean.showButton()}"  ajaxSingle="true" reRender="googleCompeteSubmitId"/>
                                         </h:selectBooleanCheckbox>
                                     Waived</s:label>
                    </div>
                    <div style="clear:both"/>
                </div>
            </div>

            <div>
                <div class="section-right" style="margin-top:-20px;">


                                 <s:label styleClass="name" rendered="#{actionBean.ruleResult[2].equalsIgnoreCase('FAIL')}" style="margin-top: -52px;padding-left: 250px;">
                                         <h:selectBooleanCheckbox id="waiveRuleCheck3" value="#{actionBean.waiveRule3Checked}" >
                                            <a4j:support event="onclick" action="#{actionBean.showButton()}"   ajaxSingle="true" reRender="googleCompeteSubmitId"/>
                                         </h:selectBooleanCheckbox>
                                     Waived</s:label>


                    <div style="clear:both"/>
                </div>

            </div>


            <div>
                <div class="section-right" style="margin-top:-20px;">

                                <s:label styleClass="name" rendered="#{actionBean.ruleResult[3].equalsIgnoreCase('FAIL')}" style="margin-top: -52px;padding-left: 250px;">
                                         <h:selectBooleanCheckbox id="waiveRuleCheck4" value="#{actionBean.waiveRule4Checked}" >
                                            <a4j:support event="onclick" action="#{actionBean.showButton()}"   ajaxSingle="true" reRender="googleCompeteSubmitId"/>
                                         </h:selectBooleanCheckbox>
                                     Waived</s:label>
                </div>
                <div style="clear:both"/>
            </div>


            <div>
                <div class="section-right" style="margin-top:-20px;">

                                <s:label styleClass="name" rendered="#{actionBean.ruleResult[4].equalsIgnoreCase('FAIL')}" style="margin-top: -52px;padding-left: 250px;">
                                         <h:selectBooleanCheckbox id="waiveRuleCheck5" value="#{actionBean.waiveRule5Checked}" >
                                            <a4j:support event="onclick" action="#{actionBean.showButton()}"   ajaxSingle="true" reRender="googleCompeteSubmitId"/>
                                         </h:selectBooleanCheckbox>
                                     Waived</s:label>
                </div>
              <div style="clear:both"/>
            </div>

            <div>
                <div class="section-right" style="margin-top:-20px;">

                                 <s:label styleClass="name" rendered="#{actionBean.ruleResult[5].equalsIgnoreCase('FAIL')}" style="margin-top: -52px;padding-left: 250px;">
                                         <h:selectBooleanCheckbox id="waiveRuleCheck6" styleClass="float: right;" value="#{actionBean.waiveRule6Checked}" >
                                            <a4j:support event="onclick" action="#{actionBean.showButton()}"   ajaxSingle="true" reRender="googleCompeteSubmitId"/>
                                         </h:selectBooleanCheckbox>
                                     Waived</s:label>

                </div>
                 <div style="clear:both"/>
            </div>

            <div style="float:right">
                                <a4j:commandButton id="googleCompeteSubmitId"
                                                 action="#{actionBean.submitDecision()}"
                                                 reRender="googleCompeteRules"
                                                 limitToList="true"
                                                 disabled="#{actionBean.btnDisabled}"
                                                 value="Submit"
                                                 type="submit"/>
         </div>

        </s:div>
    </a4j:region>
</h:form>

---

您是否尝试过任何方法，或者只是希望有人为您编写整个代码？首先处理复选框的

change

事件。要完成此操作，请更改提交按钮的

disabled

属性。在这两者之间，也许可以试着投入一点努力。@Himalay:理想情况下，你会在这两方面都进行验证。不管怎样，你听说过阵列吗？循环？

@Name("actionBean")
@Scope(ScopeType.CONVERSATION)
@Synchronized(timeout = 60000L)
@AutoCreate
public class ActionBean {

@Out(required = false)
private GoogleCompete googleCompete;

private int checkCount = 0;

private int failCount = 0;

private boolean disableButton = true;

/*
6 WAIVE RULES CHECK BOXES FOR VALIDATION
*/
private boolean waiveRule1Checked;
private boolean waiveRule2Checked;
private boolean waiveRule3Checked;
private boolean waiveRule4Checked;
private boolean waiveRule5Checked;
private boolean waiveRule6Checked;

public boolean isWaiveRule1Checked() {
    return waiveRule1Checked;
}

public void setWaiveRule1Checked(boolean waiveRule1Checked) {
    if(waiveRule1Checked) {
       checkCount++;
    } else {
      checkCount--;
    }
    this.waiveRule1Checked = waiveRule1Checked;
}

public boolean isWaiveRule2Checked() {
    return waiveRule2Checked;
}

public void setWaiveRule2Checked(boolean waiveRule2Checked) {
    if(waiveRule2Checked) {
       checkCount++;
    } else {
      checkCount--;
    }
    this.waiveRule2Checked = waiveRule2Checked;
}

public boolean isWaiveRule3Checked() {
    return waiveRule3Checked;
}

public void setWaiveRule3Checked(boolean waiveRule3Checked) {
    if(waiveRule3Checked) {
       checkCount++;
    } else {
      checkCount--;
    }
    this.waiveRule3Checked = waiveRule3Checked;
}

public boolean isWaiveRule4Checked() {
    return waiveRule4Checked;
}

public void setWaiveRule4Checked(boolean waiveRule4Checked) {
    if(waiveRule4Checked) {
       checkCount++;
    } else {
      checkCount--;
    }
    this.waiveRule4Checked = waiveRule4Checked;
}

public boolean isWaiveRule5Checked() {
    return waiveRule5Checked;
}

public void setWaiveRule5Checked(boolean waiveRule5Checked) {
    if(waiveRule5Checked) {
       checkCount++;
    } else {
      checkCount--;
    }
    this.waiveRule5Checked = waiveRule5Checked;
}

public boolean isWaiveRule6Checked() {
    return waiveRule6Checked;
}

public void setWaiveRule6Checked(boolean waiveRule6Checked) {
    if(waiveRule6Checked) {
       checkCount++;
    } else {
      checkCount--;
    }
    this.waiveRule6Checked = waiveRule6Checked;
}

public boolean isBtnDisabled() {
    return  disableButton;
}

public void showButton() {
    disableButton = checkCount != failCount;
}


private GoogleCompete fetchInformationFromAmazon(long customerAccountId) {
     googleCompete = getInfoFromJavaCXFWebService();
     ruleResult = googleCompete.getCbrRules().toArray(ruleResult);

     for (String s: ruleResult) {
         if(s.equals("FAIL")) {
            failCount++;
         }
     }
     return googleCompete;
}

public void submitDecision() {


}