禁用複選框上的按鈕單擊

-1

我有一個xhtml頁面，其中可以有0到6個彼此獨立的複選框。我想確保它們全部被選中時，提交按鈕被啓用。假設有3個複選框，只有當這3個複選框被點擊時，必須啓用提交按鈕。在JSF/Javascript中尋找解決方案。禁用複選框上的按鈕單擊

2012-02-02 Himalay Majumdar

您是否嘗試過任何東西，你只是希望有人來編碼整個事情嗎？ – millimoose 2012-02-02 23:41:49

處理複選框的'change'事件以便開始。完成後，更改提交按鈕的'disabled'屬性。在兩者之間，也許試着付出一點努力。 – Ryan 2012-02-02 23:42:24

@Himalay：理想情況下，你會在兩者中進行驗證。無論如何，你有沒有聽說過陣列？循環？ – Ryan 2012-02-03 00:04:50

下面的代碼是什麼，我想出了，JSF /煤層真的不具備實施的複選框一個乾淨的解決方案，其實JSF本身就像天空中的鑽石一樣。 Groovy更輕更乾淨。花了我一小時弄清楚，用JQuery這應該是更快更輕鬆，但這將是我未來的重構努力。感謝Andrey和Mugur。需要專注於將這個垃圾與CXF Web服務集成。我試圖儘可能清理併發布解決方案，如果有任何錯誤，我表示歉意，任何Java小孩都應該能夠找出錯誤。對於任何常規應用程序，您的解決方案都很好，它只是當JSF組件被呈現爲HTML時，組件樹會生成大量輸入複選框，對於組件樹生成的6個輸入複選框，由於JSF，生成了170個組件樹。難怪爲什麼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() { 


}

來源

2012-02-05 04:04:50

這給你一個非常有價值的例子：http://api.jquery.com/checked-selector/和大量的代碼複製。

來源

2012-02-02 23:54:10 Mike

讓我們說，複選框是一個形式，名爲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); 
}

來源

2012-02-03 00:01:44

禁用複選框上的按鈕單擊

回答

相關問題