<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <form class="form-horizontal"> <div class="form-group"> <label class="col-md-2 control-label" for="Checkboxes">Checkboxes</label> <div class="col-md-10 columns"> <label class="checkbox-inline" for="Checkboxes_Apple"> <input type="checkbox" name="Checkboxes" id="Checkboxes_Apple" value="Apple"> Apple </label> <label class="checkbox-inline" for="Checkboxes_Orange"> <input type="checkbox" name="Checkboxes" id="Checkboxes_Orange" value="Orange"> Orange </label> <label class="checkbox-inline" for="Checkboxes_Bananas"> <input type="checkbox" name="Checkboxes" id="Checkboxes_Bananas" value="Bananas"> Banana </label> <label class="checkbox-inline" for="Checkboxes_Kumquats"> <input type="checkbox" name="Checkboxes" id="Checkboxes_Kumquats" value="Kumquats"> Kumquat </label> <span class="additional-info-wrap"> <label class="checkbox-inline" for="Checkboxes_Grape"> <input type="checkbox" name="Checkboxes" id="Checkboxes_Grape" value="Grape"> Grape </label> <div class="additional-info hide"> <input type="text" id="CheckboxesNameOfGrape" name="CheckboxesNameOfGrape" placeholder="Name of Grape" class="form-control" disabled=""> </div> </span> <span class="additional-info-wrap"> <label class="checkbox-inline" for="Checkboxes_Other"> <input type="checkbox" name="Checkboxes" id="Checkboxes_Other" value="Other"> Other </label> <div class="additional-info hide"> <input type="text" id="CheckboxesOther" name="CheckboxesOther" placeholder="Describe" class="form-control" disabled=""> </div> </span> </div> </div> <div class="form-group"> <label class="col-md-2 control-label" for="Radios">Radio buttons</label> <div class="col-md-10 columns"> <label class="radio-inline" for="Radios_Apple"> <input type="radio" name="Radios" id="Radios_Apple" value="Apple"> Apple </label> <label class="radio-inline" for="Radios_Orange"> <input type="radio" name="Radios" id="Radios_Orange" value="Orange"> Orange </label> <label class="radio-inline" for="Radios_Bananas"> <input type="radio" name="Radios" id="Radios_Bananas" value="Bananas"> Banana </label> <label class="radio-inline" for="Radios_Kumquats"> <input type="radio" name="Radios" id="Radios_Kumquats" value="Kumquats"> Kumquat </label> <span class="additional-info-wrap"> <label class="radio-inline" for="Radios_Grape"> <input type="radio" name="Radios" id="Radios_Grape" value="Grape"> Grape </label> <div class="additional-info hide"> <input type="text" id="RadiosNameOfGrape" name="RadiosNameOfGrape" placeholder="Name of Grape" class="form-control" disabled=""> </div> </span> <span class="additional-info-wrap"> <label class="radio-inline" for="Radios_Other"> <input type="radio" name="Radios" id="Radios_Other" value="Other"> Other </label> <div class="additional-info hide"> <input type="text" id="RadiosOther" name="RadiosOther" placeholder="Describe" class="form-control" disabled=""> </div> </span> </div> </div> </form> <form id="testForm" class="form-horizontal" method="post"> <div class="form-group"> <div class="col-md-4"> <label class="radio" for="option-0"> <input name="options" id="option-0" value="1" type="radio"> Option #1 </label> <label class="radio" for="option-1"> <input name="options" id="option-1" value="2" type="radio"> Option #2 </label> <label class="radio" for="option-2"> <input name="options" id="option-2" value="3" type="radio"> Option #3 </label> </div> </div> <div class="form-group"> <div class="col-md-4"> <label class="checkbox" for="cb-option-0"> <input name="checkboxes" id="cb-option-0" value="1" type="checkbox"> Option #1 </label> <label class="checkbox" for="cb-option-1"> <input name="checkboxes" id="cb-option-1" value="2" type="checkbox"> Option #2 </label> <label class="checkbox" for="cb-option-2"> <input name="checkboxes" id="cb-option-2" value="3" type="checkbox"> Option #3 </label> </div> </div> </form>

label.radio-inline, label.checkbox-inline { background-color: #dcdfd4; cursor: pointer; font-weight: 400; margin-bottom: 10px !important; margin-right: 2%; margin-left:0; padding: 10px 10px 10px 30px; } label.radio-inline.checked, label.checkbox-inline.checked { background-color: #266c8e; color: #fff !important; text-shadow: 1px 1px 2px #000 !important; } .checkbox-inline + .checkbox-inline, .radio-inline + .radio-inline { margin-left: 0; } .columns label.radio-inline, .columns label.checkbox-inline { min-width: 190px; vertical-align: top; width: 30%; } .additional-info-wrap { display: inline-block; margin: 0 2% 0 0; min-width: 190px; position: relative; vertical-align: top; width: 30%; } .additional-info-wrap label.checkbox-inline, .additional-info-wrap label.radio-inline { width: 100% !important; } .additional-info-wrap .additional-info { background-color: #266c8e; clear: both; color: #fff !important; margin-top: -10px; padding: 0 10px 10px; text-shadow: 1px 1px 2px #000 !important; width: 100%; } .ui-sortable tr { cursor:pointer; } .ui-sortable tr:hover { background:rgba(244,251,17,0.45); }label.radio-inline, label.checkbox-inline, label.radio, label.checkbox { margin-right:2%; cursor:pointer; font-weight:400; padding:10px 10px 10px 30px; background-color:#dcdfd4; margin-bottom:10px!important } label.radio-inline.checked, label.checkbox-inline.checked, label.radio.checked, label.checkbox.checked { background-color:#266c8e; color:#fff!important; text-shadow:#000 1px 1px 2px!important }

$(document).ready(function() { //When checkboxes/radios checked/unchecked, toggle background color $('.form-group').on('click','input[type=radio]',function() { $(this).closest('.form-group').find('.radio-inline, .radio').removeClass('checked'); $(this).closest('.radio-inline, .radio').addClass('checked'); }); $('.form-group').on('click','input[type=checkbox]',function() { $(this).closest('.checkbox-inline, .checkbox').toggleClass('checked'); }); //Show additional info text box when relevant checkbox checked $('.additional-info-wrap input[type=checkbox]').click(function() { if($(this).is(':checked')) { $(this).closest('.additional-info-wrap').find('.additional-info').removeClass('hide').find('input,select').removeAttr('disabled'); } else { $(this).closest('.additional-info-wrap').find('.additional-info').addClass('hide').find('input,select').val('').attr('disabled','disabled'); } }); //Show additional info text box when relevant radio checked $('input[type=radio]').click(function() { $(this).closest('.form-group').find('.additional-info-wrap .additional-info').addClass('hide').find('input,select').val('').attr('disabled','disabled'); if($(this).closest('.additional-info-wrap').length > 0) { $(this).closest('.additional-info-wrap').find('.additional-info').removeClass('hide').find('input,select').removeAttr('disabled'); } }); });