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

Question

我的控制器：

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

这里的代码是为了在 account.by 的账单国家字段中提供帐户列表更新方式 selecting 到 select 的复选框值 "True" 适当的帐户将 updated.here 更新后的值 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>

所以这里是我想要的页面，这里有 "Get selected records" 按钮，所以它应该在至少要 select 一个复选框的情况下启用。并且在select模式下没有复选框的情况下也应该禁用它。（注意：请在jquery中告诉执行流程，因为你写的这有助于清楚地理解我的观点看法）所以请帮我完成这个功能以获得答案，在此先感谢。

Answer 1

如果我理解你的目的，你可以获得一个变量来计算复选框是否被选中。

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

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

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

javascript

jquery

visualforce