function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Mhlangano KhumaloMhlangano Khumalo 

How to link pure HTML radiobutton field to sObject controller in Visualforce page

My requirement is to display radiobutton fields in a VF page like below. which i've managed to do using bootstrap template to achieve this but when I put VF tags on the  radio button the look & feel changes.
User-added image
After selecting option
User-added image
<apex:page standardController="Opportunity" standardStylesheets="false" docType="html-5.0" showHeader="false">
...(static resources, html header, <apex:form>...etc goes in here)
<label for="year" class="control-label input-group">8. Can ROI be efficiently estimated?</label>

<div class="btn-group" data-toggle="buttons">
	<label class="btn btn-default"><input name="year" value="2011" type="radio"/>Yes</label>
	<label class="btn btn-default"><input name="year" value="2012" type="radio"/>Potentially</label>
	<label class="btn btn-default"><input name="year" value="2013" class="active" type="radio"/>No</label>
</div>
....
</apex:page>

I want to keep the radio button field like above but link it to the standard controller using JavaScript/Jquery so the styling isn't compromised.

I've tried using apex tags.
<apex:selectRadio styleClass="btn btn-default" value="{!Opportunity.ROI__c}"  >
  <apex:selectOption itemLabel="Yes"  html-class="" itemValue="Yes"></apex:selectOption>
  <apex:selectOption itemLabel="Potentially" itemValue="Potentially"></apex:selectOption>
  <apex:selectOption itemLabel="No" itemValue="No"></apex:selectOption>
</apex:selectRadio>
The Output.
User-added image
after selection
User-added image
If anyone has a better solution/approach. Please suggest.