要通过 jquery 中的复选框条件启用和禁用按钮?
To Enable and Disable the button by the check box conditions in jquery?
我的控制器:
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中告诉执行流程,因为你写的这有助于清楚地理解我的观点看法)
所以请帮我完成这个功能以获得答案,在此先感谢。
如果我理解你的目的,你可以获得一个变量来计算复选框是否被选中。
$(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>
我的控制器:
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中告诉执行流程,因为你写的这有助于清楚地理解我的观点看法) 所以请帮我完成这个功能以获得答案,在此先感谢。
如果我理解你的目的,你可以获得一个变量来计算复选框是否被选中。
$(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>