I am posting a code snippet .in this I want to turn the label unvisible upon change of radiobutton list selection.
While the dropdownlist are hiding properly , the label is not hiding .
Please let me know the reason why ?
<div>
@Html.BeginForm()
<div style="text-align:center;text-decoration:solid;font-family:Arial;font-size:x-large;font-weight:bold;font-style:inherit"> @Html.Label("PO Transfer") </div> <br/><br />
<table id="Table1" cellspacing="1" cellpadding="1" width="600" border="0" align="center">
<tr>
<td width="210">@Html.Label("Select Method")</td>
<td>
@Html.RadioButton("rbGrp","1", isChecked:true)@Html.Label("Country")
@Html.RadioButton("rbGrp", "2", isChecked: false)@Html.Label("Physician")
@Html.RadioButton("rbGrp", "3", isChecked: false)@Html.Label("PO")
</td>
</tr>
<tr>
<td width="210">@Html.Label("dropCountry","Country")
</td>
<td>
@Html.DropDownList("dropCountry", Model.CountryList, new { @style = "display:visible;" })
@Html.ValidationMessage("dropCountry")
</td>
</tr>
<tr>
<td width="210">@Html.Label("dropPhysician","Physician")</td>
<td>
@Html.DropDownList("dropPhysician", Model.PhysicianList, new { @style = "display:none;" })
@*@Html.DropDownListFor(m => m.PhysicianList, new SelectList(Model.GetPhysicianList(), "Value", "Text", -1))*@
</td>
</tr>
<tr>
<td width="210">@Html.Label("dropPO","PO")</td>
<td>
@Html.DropDownList("dropPO", Model.POList, new { @style = "display:none;" })
@*@Html.DropDownListFor(m => m.POList, new SelectList(Model.GetPOList(), "Value", "Text", -1))*@
</td>
</tr>
<tr>
<td width="210">@Html.Label("dropToPO","To PO")</td>
<td>
@Html.DropDownList("dropToPO", Model.POList, new { @style = "display:visible;" })
@*@Html.DropDownListFor(m => m.POList, new SelectList(Model.GetPOList(), "Value", "Text", -1))*@
</td>
</tr>
<tr>
<td colspan="2"> <input type="submit" name="Transfer" value="Transfer" /> </td>
</tr>
</table>
<script language="javascript">
$(':radio[name=rbGrp]').change(function () {
// read the value of the selected radio
var value = $(this).val();
if (value == '1') {
$('#dropPhysician').hide();
$('#dropPO').hide();
$('#dropCountry').show();
}
else if (value == "2") {
$('#dropPhysician').show();
$('#dropPO').hide();
$('#dropCountry').hide();
}
else if (value == "3")
{
$('#dropPhysician').hide();
$('#dropPO').show();
$('#dropCountry').hide();
}
});
</script>
</div>