通过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;
}
}
}
这里的代码用于在帐户的计费国家字段中向更新方式提供帐户列表。通过选择复选框的值为"True"表示要更新相应的帐户。在这里，更新后的值需要在计费国家字段中输入模型弹出框。
我的页面:
<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>
所以这里我的页面，我想在这里的"得到选定的记录"按钮在那里，所以它应该是在至少一个复选框被选中的条件下启用。在没有复选框处于选择模式的情况下它应该是禁用的。(注:请告诉执行流程在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>相关文章：
- 根据字段的值启用按钮
- 输入昵称后启用按钮
- 如果没有任何输入，如何启用按钮
- 在动态添加的文本框中输入文本时启用按钮
- 在 asp.net 回发期间禁用和启用按钮
- 功能的禁用/启用按钮;不起作用
- 启用按钮不工作
- 选择2个选择标签后启用按钮
- KnockoutJS:基于数组启用按钮的长度
- 如果验证错误是有效的JAVASCRIPT，则启用按钮
- 如何在选中复选框时启用按钮
- 如何使用AngularJS在延迟后启用按钮
- 关闭弹出窗口后重新启用按钮
- 我如何才能等待使用casperjs启用按钮
- 等到所有脚本都完成，然后再启用按钮
- Jquery - 选中复选框时未启用按钮
- 禁用/启用按钮，当文本和文本区域为空时
- 在条件jquery上启用按钮/输入区域
- 禁用然后在jquery中启用按钮
- 如果文本字段 1 中的值大于文本字段 2，则启用按钮
