Displaying Multiselect Picklist as checkboxes

Question

All is working well.. its just that i am able to see both checkboxes and radio buttons.

Following is my code

public List<string> ProductName{get;set;}

public OAOAProductsAndServicesController() 
    {
        ProductName = new List<String>();
    }

public List<selectoption> getProductNames() 
    {           
        list<selectoption> options = new list<selectoption>();            
        try 
        {               
        //Product Name is a MultiSelect Picklist               
        Schema.DescribeFieldResult fieldResult = Account_Product__c.Product_Name__c.getDescribe();

        list<schema.picklistentry> values = fieldResult.getPickListValues();               
        for (Schema.PicklistEntry a : values) 
        {                  
        options.add(new SelectOption(a.getLabel(), a.getValue()));
        }           
        }  
        catch (Exception e) 
        {             
        ApexPages.addMessages(e);           
        }
        system.debug('## Product Name Options'+ options);          
        return options; 
    }

Page code

<style>
input[type='checkbox'] {
    border: 1px solid #aaa;
    display: block;
}
</style>
<apex:pageBlockSection columns="1">
        <apex:pageblocksectionitem >          
            <apex:outputlabel value="Products" />
            <apex:selectcheckboxes layout="pageDirection" value="{!ProductName}">                   
                <apex:selectoptions value="{!ProductNames}" />          
            </apex:selectcheckboxes> 
        </apex:pageblocksectionitem>
 </apex:pageBlockSection>

Answer 1

I recently needed to implement something similar to this and found this jQuery plugin from Scott Horlbeck to fit the need wonderfully. It was also incredibly easy to make it work with VF markup and required no complicated workarounds.

http://www.scotthorlbeck.com/code/tochecklist/

---

If you choose to use this plugin, you will need to modify the script so that it selects elements from the DOM using the id attribute $('[id="theId"]') rather than the shorthand id selector $('#theId'). Salesforce id values include the colon character (:) and you cannot use the shorthand jQuery element Id selector syntax $('#theId') as the colon is interpreted as a pseudo selector by jQuery. A simple change to the plugin script replacing all of the shorthand id selector notations with the id element attribute reference is all it takes to make use of this great plugin within a VF page.

As an example of the replacement that I am talking about, at line 198 in the 1.5.0 source code you will find this line using the shorthand notation: $('#'+jSelectElem.attr('id')+'_findInList').val(o.searchBoxText)

It must be modified like this to be compatible with salesforce element id values which include the colon character: $('[id="'+jSelectElem.attr('id')+'_findInList"]').val(o.searchBoxText)

---

Screenshot to demonstrate how the normal SFDC multiselect picklist looked when it was rendered in the VF page and converted by the plugin in my page:

---

The VF page markup looks like this example shown below. Make note that it uses no special markup for the checkbox list - it's just a normal <apex:selectList /> and then the plugin script is executed immediately after the select list is rendered into the DOM.

Two key points to making this plugin behave properly with the controller are the two parameters passed to the .toChecklist() function to not submit the data as an array or submit using the id attribute as the key for the data. These two parameters override the plugin's default values and without them, this plugin does not create its markup for the checkbox list in a way that the page controller properly interprets.

<apex:page>
    <!-- scripts required for the toChecklist script for converting a multiselect list into checkboxes -->
    <apex:includeScript value="{!URLFOR($Resource.jQuery, 'jquery.min.js')}" />
    <apex:stylesheet value="{!URLFOR($Resource.jQueryToChecklist, 'jquery.toChecklist.css')}" />
    <apex:includeScript value="{!URLFOR($Resource.jQueryToChecklist, 'jquery.toChecklist.js')}" />

    <!-- snipped a bunch of stuff including jQuery.noConflict() -->

    <apex:selectList id="checkboxPicklist" value="{!selectedValues}" multiselect="true">
        <apex:selectOptions value="{!theSelectOptions}" />
    </apex:selectList>
    <script>jQuery('[id="{!$Component.checkboxPicklist}"]').toChecklist({ submitDataAsArray: false, preferIdOverName: false });</script>
</apex:page>

Answer 2

I took the existing source code that you provided and do not have any radio buttons showing up. I suspect there is additional CSS or HTML markup in your project that wasn't included.

On another note, where you are instantiating the SelectOption, the value field should be the first parameter instead of the label.