I have a bunch of checkbox items, including one labeled nocalls, as well as a couple of dropdownlist boxes.
Here are the dropdown boxes:
<tr>
<td align="right"><FONT class="Arial10"><B>Profile<font color="#ff0000">*</font></B></FONT></td>
<td>
<asp:dropdownlist id="eProfile" runat="server" Width="144px">
<asp:listitem Value="" Selected="True">--Select A Profile--</asp:listitem>
<asp:listitem Value="Add Profile">Add Profile</asp:listitem>
<asp:listitem Value="Delete Profile">Delete Profile</asp:listitem>
<asp:listitem Value="Update Profile">Update Profile</asp:listitem>
<asp:listitem Value="Transfer">Transfer</asp:listitem>
<asp:listitem Value="See Notes">See Notes</asp:listitem>
</asp:dropdownlist>
</td>
</tr>
<TR>
<td align="right"><FONT class="Arial10"><B>Profile<font color="#ff0000">*</font></B></FONT></td>
<td>
<asp:dropdownlist id="kProfile" runat="server" Width="144px">
<asp:listitem Value="" Selected="True">--Select A Profile--</asp:listitem>
<asp:listitem Value="Add Manager Profile">Add Manager Profile</asp:listitem>
<asp:listitem Value="Add User Profile">Add User Profile</asp:listitem>
</asp:dropdownlist>
</td>
</TR>
And here is the list of checkboxes:
<input id="CheckBox9" runat="server" type="checkbox" value="Notary" />Notary
<input id="CheckBox10" runat="server" type="checkbox" value="VPN" />VPN
<input id="CheckBox11" runat="server" type="checkbox" value="VPSPagecenter" />VPS-Pagecenter
<input id="CheckBox12" runat="server" type="checkbox" value="PCDOC" />PC DOC
<input id="CheckBox13" runat="server" type="checkbox" value="nocalls" />nocalls
If the user checks the nocalls checkbox, we want to display only the kProfile dropdown and hide the eProfile dropdown.
If the user clicks on any other checkboxes except for nocalls, the kProfile dropdown should be hidden while the eProfile dropdown is displayed.
I attempted to use JavaScript to achieve this but I'm still seeing both dropdowns.
I must be making a silly mistake somewhere.
if (theForm.service.value.indexOf("nocalls") >= 0) {
var kprofobj = document.getElementById("kProfile");
var eprofobj = document.getElementById("eProfile");
kprofobj.style.visiblilty = "visible";
eprofobj.style.visiblilty = "hidden";
kprofobj.style.display = "block";
}
<script type="text/javascript">
$(document).ready(function () {
if ($('#nocalls').attr('checked')) {
$('#eProfile').hide();
$('#kProfile').show()
};
});
</script>