要通过jquery中的复选框条件启用和禁用按钮?

时间:2016-10-07 09:57:46

标签: javascript jquery visualforce

我的控制器:

public class AccountEditController {

    public String closePopup { get; set; }

    accountwrapper1 makeEdit;
    List<accountwrapper1> listAccount = new List<accountwrapper1>();
    List<Account> selectableAccount = new List<Account>();
    //set<Account> selectableAccount2 = new set<Account>();
    //public Boolean showPanel {get; set;}
    public Boolean showPopup { get; set; }

   public AccountEditController() {
          showPopup = False;
         //showPanel = False;
   }

    public List<accountwrapper1> getAccounts() {
        if(listAccount == Null){
            for(Account a: [SELECT Id, Name, BillingCountry, Phone FROM Account])
            listAccount.add(new accountwrapper1(a));
            return listAccount; }
        else{
            listAccount.clear();
            for(Account a: [SELECT Id, Name, BillingCountry, Phone FROM Account])
            listAccount.add(new accountwrapper1(a));
            return listAccount;            
            }           
    }

     public PageReference showToPopup() {
   // public PageReference showToPanel() {
        showPopUp = True;
        return Null;
        //showPanel  = True;
        }

     public PageReference getSelectable() {
         system.debug('Hello');
        selectableAccount.clear();
        for(accountwrapper1 accwrapper : listAccount)
        if(accwrapper.selected == True)
        selectableAccount.add(accwrapper.acc);
        system.debug(selectableAccount);
        return Null;              
    }

    public string BillingCountry {
        get; 
        set;
    }


    /*public PageReference Savemeth() {
        for(account acc :selectableAccount ) {
                acc.BillingCountry = BillingCountry;
                selectableAccount2.add(acc);

        }    
    update selectableAccount2;
    showPopup = False;
    return Null;

    }*/

    public PageReference Savemeth() 
    {
        map<Id, Account> mapAccountForUpdate = new map<Id, Account>();
        for(account acc :selectableAccount ) 
        {
            system.debug('BillingCountry: '+BillingCountry);
            acc.BillingCountry = BillingCountry;
            mapAccountForUpdate.put(acc.Id, acc);
        }    
        update mapAccountForUpdate.values();
        selectableAccount = new List<Account>();
        showPopup = Null;
        BillingCountry = '';
        //showPopup = False;
        return null;
    }

    public PageReference cancelmeth() {        
        return Null;
    }

    public PageReference closePopup() {
        showPopup = Null;
        BillingCountry = '';
        //showPopup = False;   
        return Null;
    }

    public PageReference GetSelectedAccounts()
    {
       if(selectableAccount.size()>0) {
        system.debug(selectableAccount.size());
        system.debug(selectableAccount);
        showPopup = Null;
        return Null;
        }
        else
        showPopup = Null;
        return Null;
    } 


     public class accountwrapper1
    {             
        public Account acc{get; set;}      
        public Boolean selected {get; set;}
        public accountwrapper1(Account a)
        {
            acc = a;
            selected = False;
        }
    }
}

这里的代码是用于在账户的账单国家的字段中以更新方式提供账户列表。通过选择is&#34; True&#34;的复选框值。将更新相应的帐户。其中更新的值s将由结算国家/地区字段中的模型弹出框的输入所需。

我的页面:

<apex:page controller="AccountEditController" applyHtmlTag="true">
<head>
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />
</head>
<script>
    $(document).ready(function(){    
        select();        
    });

    function select(){
        $('[id*=chkb1]').change(function(){

            $("[id*='chkb2']").attr("checked",this.checked);
            getSelectable();

        });  

        $('[id*=chkb2]').click(function(){

            if($('[id*=chkb2]').length== $("[id*='chkb2']: checked").length)
             {          
                 $("[id*='chkb1']").attr("checked",this.checked); 
                 getSelectable();      

             }
             else
             {    
                 var checkboxes = document.getElementsByTagName('input');
                 var counter = 0;
                 var counter1 = 1;

                 for (var i = 0; i < checkboxes.length; i++) {
                     if (checkboxes[i].type == 'checkbox') {
                         counter++;
                         if(checkboxes[i].checked == true){
                             counter1++;
                         }
                     }
                 }           
                 if(counter==counter1){
                     $("[id*='chkb1']").attr("checked",this.checked);   
                     getSelectable();
                 } else {
                      $("[id*='chkb1']").removeAttr("checked");   
                      getSelectable(); 
                  }                  
             }           
        }); 
    } 

</script>
    <style type="text/css">
    .PopupBackground{
        background-color: white;
        opacity: 0.8;
        filter: alpha(opacity = 20);
        position: absolute;
        width: 100%;
        height: 200%;
        top: -100px;
        left: 10px;
        z-index: 9998;
    }
    .AccountEdit{
        background-color: white;
        border-width: 8px;
        border-style: solid;
        z-index: 9999;
        left: 30%;
        padding:10px;
        position: absolute;
        width: 350px;
        margin-left: 75px;
        top:300px;
    }
    </style>
        <apex:form >
            <apex:actionFunction name="getSelectable" action="{!getSelectable}" reRender="Output"/>
            <apex:pageBlock Title="List of Accounts" >

                   <apex:pageBlockButtons location="top">
                        <apex:commandButton value="Get selected Records" action="{!showToPopup}" rerender="Output" id="button"/>
                        <apex:commandButton value="Cancel" action="{!closePopup}" rendered="output"/>
                      <!-- <apex:commandButton value="Get selected Records" action="{!showToPanel}" rerender="Output" id="button"/>---->

                   </apex:pageBlockButtons>

                 <!-- {!showPanel}---->
                      <apex:outputPanel id="Output">
                          <apex:outputPanel styleClass="PopupBackground" layout="black" rendered="{!showPopup}">
                              <apex:outputPanel styleClass="AccountEdit" layout="black" rendered="{!showPopup}">
                         <!---  <apex:outputPanel rendered="{!showPanel}">----->
                           <!---{!showPanel}---------->
                               <apex:outputLabel value="BillingCountry: "></apex:outputLabel>
                               <apex:inputText id="BillingCountry" value="{!BillingCountry}" size="40" style="height:13px;font-size:11px;"/><br />                   
                               <center><apex:commandButton value="Save" action="{!Savemeth}" reRender="Initialtable,Output" oncomplete="select();"/>
                              <!-- <apex:commandButton value="cancel" action="{!cancelmeth}"/>---->
                               <apex:commandButton value="Cancel" action="{!closePopup}"/></center>
                                </apex:outputPanel>
                            </apex:outputPanel>                   
                        </apex:outputPanel>  
                 <!--   <apex:commandButton value="cancelPopup" action="{!closePopup}"/>--->
                   <apex:pageBlockSection Title="List of Available Accounts" columns="1" collapsible="true">
                            <apex:pageblockTable value="{!accounts}" var="a" id="Initialtable">

                                <apex:column >
                                    <apex:facet name="header">
                                        <apex:inputCheckbox value="{!a.selected}" id="chkb1">
                                            <!-- <apex:actionSupport event="onclick" action="{!getSelectable}" reRender="Output"/>    -->
                                        </apex:inputCheckbox>
                                    </apex:facet>
                                    <apex:inputCheckbox value="{!a.selected}" id="chkb2" />
                                   <!-- <apex:actionSupport event="onclick" action="{!getSelectable}" reRender="Output"/> -->
                                </apex:column>

                                <apex:column headervalue="Account Name" value="{!a.acc.Name}" width="200"/>
                                <apex:column headervalue="Phone" value="{!a.acc.Phone}" width="300"/>
                                <apex:column headervalue="Billing Country" value="{!a.acc.BillingCountry}" width="300"/>

                            </apex:pageblocktable>
                   </apex:pageBlockSection>

            </apex:pageblock>
        </apex:form>
</apex:page>

所以这里我想要的页面是&#34;获取所选记录&#34;按钮是这样的,所以应该在至少选中一个复选框的情况下启用它。并且在没有复选框的情况下它应该被禁用选择模式。(注意:请告诉jquery中的执行流程,因为你写的是帮助我在我的观点中清楚地理解) 所以请提前帮助我完成这个功能以获得答案。

1 个答案:

答案 0 :(得分:0)

如果我了解你的目的,你可以获得一个变量来计算复选框。

&#13;
&#13;
$(document).ready(function() {
  $('.btn').prop('disabled', true);

});
var chbchecked = 0;
$('.chb').change(function() {
  if (this.checked) {
    chbchecked++;
    $('.btn').prop('disabled', false);
  } else {
    chbchecked--;
    if (chbchecked == 0) {
      $('.btn').prop('disabled', true);
    }
  }
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="checkbox" class="chb" value="1" /><a>chb1</a>
<input type="checkbox" class="chb" value="2" /><a>chb2</a>
<input type="checkbox" class="chb" value="3" /><a>chb3</a>
<button type="submit" class="btn">
  Save
</button>
&#13;
&#13;
&#13;