+ Start a Discussion
arunadeveloperarunadeveloper 

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,

Best Answer chosen by Admin (Salesforce Developers) 
arunadeveloperarunadeveloper

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

SFDC_VikashSFDC_Vikash

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.

 

 

Starz26Starz26

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");
        }
    });
}
arunadeveloperarunadeveloper

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 .

 

arunadeveloperarunadeveloper

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);"/>

Starz26Starz26

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

arunadeveloperarunadeveloper

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)"/>

This was selected as the best answer
Starz26Starz26

arunadeveloper wrote:

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.

 

 

 

Starz26Starz26

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

 

 

ivanmdvivanmdv

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>

Vignesh M 9Vignesh M 9
Hi ,
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;"/>