Apex Code Development You need to sign in to do that
Don't have an account?
arunadeveloper Allow to check only one check box on visualforce page (High priority)
Hi There,
I have a visual force page which display multiple records with check box's.
I need to allow the user to select only one check box at a time.If they are trying to select a another check box should display a alert saying that u r allowed to check only one record at a time.
I know it is possible with only javascript, can any one post sample code for this .
or if any other suggestions please let me know .
Thank you,
I got the solution
<script>
function enableDisable(cb)
{
$("input:checkbox[id*=looped]").removeAttr('checked');
$(cb).attr('checked', 'checked');
}
</script>
<apex:inputCheckBox id="looped" value="{!ask.isSelected}" onclick="enableDisable(this)"/>
All Answers
Hi
if you want to restrict to select only 1 record at a time then you can use radio buttons instead of checkboxes. Is there any special requirement to use checkboxes only.
using jQuery
add styleClass="chk" onChange="oneCheck(this)"
to you checkbox
Java:
function oneCheck(a){ $('.isSelected').removeClass("isSelected"); if($(a).is(":checked")){ $(a).addClass("isSelected"); } $(".chk").each(function() { if($(this).hasClass('isSelected') == false){ $(this).removeAttr("checked"); }else{ $(this).attr("checked","checked"); } }); }Hi ,
Thank you for the replay,
I was trying to implement your code on visualforce page but I am getting java script error
<script type="text/javascript">
function oneCheck(a){
//alert("in oneCheck");
$('.isSelected').removeClass("isSelected"); at this line (Object expected) , what is '.isSelected'
if($(a).is(":checked")){
$(a).addClass("isSelected");
}
$(".chk").each(function() {
if($(this).hasClass('isSelected') == false){
$(this).attr("checked",false);
}else{
$(this).attr("checked",true);
}
});
}
<apex:inputCheckbox value="{!multipleBirth.isSelectMultipleBirthRec}" styleClass="chk" onChange="oneCheck(this);"/>
I am I doing any thing wrong , Can you please correct .
Error is gone after adding below line
but still it is allowing me to selecte more than one check box at a time.
is there a way to display alert if user is trying select more then one check box .
<apex:includeScript value="{!URLFOR($Resource.jQuery, 'js/jquery-1.4.2.min.js')}"/>
<script type="text/javascript">
function oneCheck(a){
//alert("in oneCheck");
$('.isSelected').removeClass("isSelected");
if($(a).is(":checked")){
$(a).addClass("isSelected");
}
$(".chk").each(function() {
if($(this).hasClass('isSelected') == false){
$(this).attr("checked",false);
}else{
$(this).attr("checked",true);
}
});
}
</script>
<apex:inputCheckbox value="{!multipleBirth.isSelectMultipleBirthRec}" styleClass="chk" onChange="oneCheck(this);"/>
Not sure how you have your page set up.....
You must have must have multiple check boxes in a repeatpageblocktable/etc for it to work:
Put the styleClass on the repeated checkbox component
I got the solution
<script>
function enableDisable(cb)
{
$("input:checkbox[id*=looped]").removeAttr('checked');
$(cb).attr('checked', 'checked');
}
</script>
<apex:inputCheckBox id="looped" value="{!ask.isSelected}" onclick="enableDisable(this)"/>
The above will not allow you to uncheck the inputed that is checked. So once you check a box, there will always be one checked.
It is a good solution though.
After reviewing my code I forgot I was using isSelected (and another variable that I removed from the code I pasted) to select groups of checkboxes and it was not really required for your use case.
I updated my original code and it should work for you now and allow you to deselect as well.
I am using isSelected as a styleClass to indicate the state of the checkbox. This way you can deselect it.
Also, in IE my previous code with attr("checked",false); did not work...
**Use jQuery 1.7 or higher**
Hello,
i have this apex page block setup in a visualforce page.
Can somebody help me put in the right code for any user to just have 1 checkbox set to true (max) at a time.
in other words, upon clicking the checkbox, reset all values to false, then just select to true the current checkbox.
Please see code below:
<script type = "text/javascript">
function enableDisable(cb){
what is the code?
}
</script>
<apex:pageBlock >
<apex:pageBlockTable value="{!account.contacts}" var="c">
<!-- <apex:repeat value="{!account.Contacts}" var="c"> -->
<apex:column headerValue="View"> <apex:outputLink value="http://test.salesforce.com/{!c.Id}">{!c.name}</apex:outputLink></apex:column>
<apex:column headerValue="Title" value="{!c.Title}"/>
<apex:column headerValue="Email" value="{!c.Email}"/>
<apex:column headerValue="Phone" value="{!c.Phone}"/>
<apex:column headerValue="Mobile" value="{!c.MobilePhone}"/>
<apex:column headerValue="Primary Support Contact" value="{!c.Primary_Support_Contact__c}"/>
<apex:column headerValue="Billing Contact" > <apex:inputCheckbox id="looped" onClick="enableDisable(this)" value="{!c.Billing_Contact__c}"></apex:inputCheckbox> </apex:column>
<apex:column headerValue="SaaS Administrator" value="{!c.SaaS_Administrator__c}"/>
<apex:column headerValue="Inactive" value="{!c.InActive__c}"/>
<apex:column headerValue="Last Activity Date" value="{!c.LastActivityDate}"/>
<!-- </apex:repeat> -->
</apex:pageBlockTable>
<!-- <apex:commandButton value="Update" id="updateButton" onclick="return confirmPop();" reRender="null"/> -->
</apex:pageBlock>
try this..
function checkboxes(cb)
{
if($("input:checkbox[id*=looped]:checked").length > 1)
{
alert('test');
$(cb).removeAttr('checked');
return false;
}
else
{
return true;
}
}
in page:
<apex:inputCheckbox id="looped" value="{!cq.isSelected}" onclick="checkboxes(this);" style="height:auto;width:auto;"/>