Отключить кнопку при нажатии флажка - PullRequest
Новая
       2

Отключить кнопку при нажатии флажка

0 голосов
/ 03 февраля 2012

У меня есть страница xhtml, в которой могут быть от 0 до 6 флажков независимо друг от друга.Я хочу убедиться, что, когда все они проверены, кнопка отправки включена.Допустим, есть 3 флажка, только когда эти 3 флажка нажаты, кнопка отправки должна быть включена.Ищете решение в JSF / Javascript.

Ответы [ 3 ]

0 голосов
/ 03 февраля 2012

скажем, что флажки находятся внутри формы с именем 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);
}
0 голосов
/ 05 февраля 2012

Ниже приведен код, который я придумал, JSF / Seam на самом деле не имеет чистого решения для реализации флажков, на самом деле сам JSF дерьмо, как бриллиант в небе. Groovy намного легче и чистее. Мне понадобилось ЧАС, чтобы понять, с JQuery это должно было быть быстрее и проще, но это было бы моим будущим усилием по рефакторингу. Спасибо Андрею и Мугуру. Пора сосредоточиться на интеграции этого дерьма с CXF Web Services. Я старался вычистить как можно больше и опубликовать решение, если в моих извинениях есть какие-либо ошибки, любой ребенок java должен быть в состоянии выяснить ошибки.

Андрей. Ваше решение подходит для любого обычного приложения, просто когда компоненты JSF отображаются в виде HTML, дерево компонентов генерирует множество входных флажков, а для 6 входных флажков дерево компонентов создало 170, благодаря JSF. Не удивительно, почему Sun распродал. 

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


}
0 голосов
/ 03 февраля 2012

Это очень ценный пример: http://api.jquery.com/checked-selector/ и множество кода для копирования.

...