Disable button on checkbox click

Question

I have a xhtml page in which there can be 0 to 6 check boxes independent of each other. I want to make sure when all of them are checked, submit button is enabled. Let say there are 3 checkboxes, only when these 3 checkboxes are clicked, the submit button must be enabled. Looking for a solution in JSF / Javascript.

Have you tried anything or do you just want someone to code the whole thing for you? — millimoose, Feb 02 '12 at 23:41
Handle the `change` event of the checkboxes for a start. For a finish, change the `disabled` property of your submit button. In between, maybe try putting in a little effort. — Ry-, Feb 02 '12 at 23:42
@Himalay: Ideally you would validate in both. Anyway, have you heard of arrays? Loops? — Ry-, Feb 03 '12 at 00:04

score 0 · Answer 1 · answered Feb 02 '12 at 23:54

0

This gives you a very valuable example: http://api.jquery.com/checked-selector/ and plenty of code to copy from.

answered Feb 02 '12 at 23:54

Mike

3,017
1
34
47

score 0 · Answer 2 · answered Feb 03 '12 at 00:01

let's say that the checkboxes are inside a form named 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);
}

score 0 · Accepted Answer · answered Feb 05 '12 at 04:04

Below is the code what I came up with, JSF/Seam dont really have a clean solution for implementing checkboxes, in fact JSF itself is shit like a diamond in the sky. Groovy is much lighter and clean. Took me an HOUR to figure out , with JQuery this should have been faster and easy peasy, but that would my future refactoring effort. Thanks to Andrey and Mugur. Time to focus on integrating this shit with CXF Web Services. I have tried to clean as much as possible and post the solution, if there are any mistakes my apologies, any java kid should be able to figure out mistakes.

Andrey : Your solution was fine for any regular application, its just that when JSF components are rendered as HTML, the component tree generates lot of input checkboxes, for 6 input checkboxes the component tree generated 170, thanks to JSF. No wonder why Sun sold out.

<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>

ActionBean.java

@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() {


}

Disable button on checkbox click

3 Answers3