Demo of managing OPTGROUP disabled attributes by radio button click event

HTML

<div class="row">
  <div class="col-md-4">
<form id='f1'>
<table>
<tr><td>
      <input type='radio' name='options' id='opt1' value='publications' > <label for='opt1' class='lb'>Publications</label><br> 
</td></tr>
<tr><td>
      <input type='radio' name='options' id='opt2' value='books' >  <label for='opt2' class='lb'>Books </label><br> 
</td></tr>

<tr><td>
      <input type='radio' name='options' id='opt3' value='articles' >  <label for='opt3' class='lb'>Articles </label><br> 
</td></tr>

</table>

</form>
</div>
<div class="col-md-4">
<select id=material name=material class='form-control'>
  <optgroup label="Books" id=books>
        <option value=b1>Book 1</option>
        <option value=b2>Book 2</option>
        <option value=b3>Book 3</option>
  </optgroup>
<optgroup label="Publications" id=publications>
        <option value=pb1>Publications 1</option>
        <option value=pb2>Publications 2</option>
        <option value=pb3>Publications 3</option>
</optgroup>
<optgroup label="Articles" id=articles>
        <option value=a1>Articles 1</option>
        <option value=a2>Articles 2</option>
        <option value=a3>Articles 3</option>
</optgroup>

</select>
</div>
  <div class="col-md-2"><div id='t1' style="position:absolute;"></div></div>
</div>

jquery

<script>
$(document).ready(function() {

$("input:radio[name=options]").click(function() {
 $("#t1").css("background-color", "yellow"); // change the color of the background
 var str=$(this).val()
 $('#t1').html(str);
 switch(str)
 {
case 'books':	 
  $('#books').attr('disabled', true);
  $('#publications').attr('disabled', false);
  $('#articles').attr('disabled', false);
break; 
case 'publications':	 
  $('#books').attr('disabled', false);
  $('#publications').attr('disabled', true);
  $('#articles').attr('disabled', false);
break;
case 'articles':	 
  $('#books').attr('disabled', false);
  $('#publications').attr('disabled', false);
  $('#articles').attr('disabled', true);
break;
 default:	 
  $('#books').attr('disabled', false);
  $('#publications').attr('disabled', false);
  $('#articles').attr('disabled', false);
break; 
 }
})

})
</script>