简体   繁体   English

要启用和禁用按钮的jQuery中的复选框条件?

[英]To Enable and Disable the button by the check box conditions in jquery?

My Controller: 我的控制器:

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

Here the code is for the providing the list of account to the updating manner in the field of the billing country of the account.by the selecting to the check box value of the is "True" that appropriate account is to be updated.here the updated value s to be desired by the input of the model popup box in the billing country field. 此处的代码用于在帐户的开票国家/地区字段中以更新方式提供帐户列表。通过选择“ True”复选框值来选择要更新的适当帐户。通过在“开票国家/地区”字段中输入模型弹出框来更新所需的值s。

My Page: 我的页面:

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

So here the my page I want in here the "Get selected records" button is there so It's should be enable in the condition of the atleast the one check box are to be selected in. And also it's should be disable in the condition of the there is no check box are in select mode.(Note:Please tell the execution flow in the jquery as your written it's help to understand clearly in my point of view) So please help me to done this function for answers thanks in advance. 因此,在这里我要在此处的我的页面上有“获取选定的记录”按钮,因此应在至少选中一个复选框的情况下启用它。在以下情况下,也应禁用它:在选择模式下没有复选框。(注意:请以您的书面说法告诉jquery的执行流程,这有助于从我的角度清楚地理解)。因此,请帮助我完成此功能,以预先感谢您的回答。

if i understand your purpose you can get a variable for counting check boxes are checked. 如果我了解您的目的,则可以选中一个用于计数的变量。

 $(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); } } }); 
 <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> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM