Demo of Enable and Disable a set of radio buttons based on user selection

CSS

<style>
.lb{ 
 text-align:left; 
FONT-SIZE: 14px;
font-weight: normal; color: #4c4c4c;
font-family: Verdana;
position: relative; 
}
</style>

HTML

<div class="row">
  <div class="col-md-8">
<form id='f1'>
<input type='radio' name='choice' id='cho1' value='choice1' > <label for='opt1' class='lb'>Programming</label>
<input type='radio' name='choice' id='cho1' value='choice2' > <label for='opt1' class='lb'>Graphics Design</label>
<br><br>
<table>
<tr><td>
      <input type='radio' name='options' id='opt1' value='PhotoShop' > <label for='opt1' class='lb'>PhotoShop</label>  
</td></tr>
<tr><td>
      <input type='radio' name='options' id='opt2' value='Flash' >  <label for='opt2' class='lb'>Flash</label> 
</td></tr>

<tr><td>
      <input type='radio' name='options' id='opt3' value='PHP'>  <label for='opt3' class='lb'>PHP</label> 
</td></tr>
<tr><td>
      <input type='radio' name='options' id='opt4' value='Java Server Page' >  <label for='opt4' class='lb'>Java Server Page</label> 
</td></tr>
</table>
</form>
</div>
  <div class="col-md-4"><div id='t1' style="position:absolute;"></div></div>
</div>

jquery

<script>
$(document).ready(function() {
$("input:radio[name=choice]").click(function() {
var selected_choice=$(this).val();
$("input:radio[name=options]").prop('checked', false);// resett 2nd group
 $('#t1').html(''); // No display of choice

if(selected_choice=='choice1'){
$("#opt1,#opt2").attr("disabled",true); // Two  options disabled
$("#opt3,#opt4").attr("disabled",false); // Two  options enabled
}

if(selected_choice=='choice2'){
$("#opt3,#opt4").attr("disabled",true); // Two  options disabled
$("#opt1,#opt2").attr("disabled",false); // Two  options enabled
}

})

$("input:radio[name=options]").click(function() {
 $("#t1").css("background-color", "yellow"); // change the color of the background
 $('#t1').html($(this).val());
})

})
</script>