Razim Khan Razim Khan - 7 months ago 23
Javascript Question

How to disable/enable a div on radio button click in jquery

I have two radio button on which I want, when one radio button is clicked its div to be enabled and when other is clicked its related is enabled.

<table>
<tr>
<td>
BOD: @Html.RadioButton("HeadBOD", "Head")
</td>
<td>
Head:@Html.RadioButton("HeadBOD", "BOD")
</td>
<td></td>
<td></td>
</tr>
</table>

1) <div id="HeadDive"></div>
2) <div id="BODDive"></div>

Answer

Try this:

<script type="text/javascript"> 
$( document ).ready(function() {
  $("input:radio").click(function() {
    if($(this).val() == "head") {
      $("#head").show();
      $("#bod").hide();
    } else {
      $("#head").hide();
      $("#bod").show();
    }
  });
});
</script>

<input type="radio" name="opt" value="head"> HEAD
<input type="radio" name="opt" value="bod"> BOD

<div id="head" style="display:none;">Head</div>
<div id="bod" style="display:none;">BOD</div>