Hi I need help with enabling /disabling RadiobuttonList from Client Side
My form looks like this:
What I want is by default Yes-Options RadioButtonlist and No-Options Radiobuttonlist shoulsd be disbaled. When user selects YES, YES-Options Radiobutton list shouls get enabled and NO-Options radiobutton list should get disbaled In the same way when selected
NO, NO-Options radiobuttonlist should get enabled and YES-Options radiobutton list shouls be disabled.
When clicked Save button on bottom, validation should happen. User should select YES or NO from radiobutton list which is on top and then a value should be selected from it's corresponding options. ( When Yes is selected, a value should be selected from
YES--Options and Viceversa)
sbmdude
Member
177 Points
153 Posts
Enable Disable RadioButtonList with another RadiobButtonList Selection ASP.NET
May 04, 2012 06:44 AM|LINK
Hi I need help with enabling /disabling RadiobuttonList from Client Side
My form looks like this:
What I want is by default Yes-Options RadioButtonlist and No-Options Radiobuttonlist shoulsd be disbaled. When user selects YES, YES-Options Radiobutton list shouls get enabled and NO-Options radiobutton list should get disbaled In the same way when selected NO, NO-Options radiobuttonlist should get enabled and YES-Options radiobutton list shouls be disabled.
When clicked Save button on bottom, validation should happen. User should select YES or NO from radiobutton list which is on top and then a value should be selected from it's corresponding options. ( When Yes is selected, a value should be selected from YES--Options and Viceversa)
How can I do this ??
Below is my markup
How can I do this from Clientside ?
asteranup
All-Star
30184 Points
4906 Posts
Re: Enable Disable RadioButtonList with another RadiobButtonList Selection ASP.NET
May 04, 2012 07:29 AM|LINK
Hi,
Try this-
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $("table[id$=rbtnMain] input:first").attr("checked", true); $("table[id$=rbtnMainNo]").attr("disabled", true); $("input[name$=rbtnMain]").click(function () { if ($(this).val() == 0) { $("table[id$=rbtnMainNo]").attr("disabled", false); $("table[id$=rbtnMainYes]").attr("disabled", true); $("table[id$=rbtnMainYes] input").removeAttr("checked"); } else if ($(this).val() == 1) { $("table[id$=rbtnMainNo]").attr("disabled", true); $("table[id$=rbtnMainYes]").attr("disabled", false); $("table[id$=rbtnMainNo] input").removeAttr("checked"); } }); $("#btnSave").click(function () { if ($("table[id$=rbtnMainYes]").attr("disabled") != "disabled") { alert("Select an yes option"); return false; } else if ($("table[id$=rbtnMainNo]").attr("disabled") != "disabled") { alert("Select an no option"); return false; } }); }); </script> </head> <body> <form id="form1" runat="server"> <asp:RadioButtonList ID="rbtnMain" runat="server"><asp:ListItem Text="YES" Value="1"></asp:ListItem><asp:ListItem Text="NO" Value="0"></asp:ListItem></asp:RadioButtonList><br /><br /> <span>YES -- Options</span> <asp:RadioButtonList ID="rbtnMainYes" runat="server"> <asp:ListItem Text="Options Yes -1" Value="1"></asp:ListItem> <asp:ListItem Text="Options Yes -2" Value="2"></asp:ListItem> <asp:ListItem Text="Options Yes -3" Value="3"></asp:ListItem> </asp:RadioButtonList> <br /><br /> <span>NO -- Options</span> <asp:RadioButtonList ID="rbtnMainNo" runat="server"> <asp:ListItem Text="Options No -1" Value="1"></asp:ListItem> <asp:ListItem Text="Options No -2" Value="2"></asp:ListItem> <asp:ListItem Text="Options No -3" Value="3"></asp:ListItem> </asp:RadioButtonList> <br /><br /> <asp:Button ID="btnSave" runat="server" Text="Save" /> </form> </body> </html>Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
shari.aravin...
Member
117 Points
42 Posts
Re: Enable Disable RadioButtonList with another RadiobButtonList Selection ASP.NET
May 04, 2012 08:48 AM|LINK
Hi,
I wrote this code its woking fine with enabling the radio buttonlist but has some issue in disable.
The disable woks fine if ter is only radiobutton.
<head runat="server">
<title></title>
<script type="text/ecmascript" language="javascript">
function rblSelectedValue(rbl,rblY,rblN) {
var txt, rdO;
rdO = document.getElementsByName(rbl);
//alert(rdO.length);
for (var i = 0; i < rdO.length; i++) {
if (rdO[i].checked) {
txt = rdO[i].parentNode.getElementsByTagName('label')[0].innerHTML;
}
}
if (txt == "YES") {
EnableChild(document.getElementById(rblY));
// DisableChild(document.getElementById(rblN));
}
else {
EnableChild(document.getElementById(rblN));
// DisableChild(document.getElementById(rblY));
}
}
function EnableChild(control) {
var children = control.childNodes;
try { control.removeAttribute('disabled') }
catch (ex) { }
for (var j = 0; j < children.length; j++) {
EnableChild(children[j]);
}
}
// function DisableChild(control1) {
// var children1 = control1.childNodes;
//
// try {children1.attr("disabled", true); }
// catch (ex) { }
// for (var j = 0; j < children1.length; j++) {
// DisableChild(children1[j]);
// }
// }
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:RadioButtonList ID="rbtnMain" runat="server" OnClick="rblSelectedValue('rbtnMain','rbtnMainYes','rbtnMainNo')">
<asp:ListItem Text="YES" Value="1"></asp:ListItem>
<asp:ListItem Text="NO" Value="0"></asp:ListItem>
</asp:RadioButtonList>
<br />
<br />
YES -- Options
<asp:RadioButtonList ID="rbtnMainYes" runat="server" Enabled="false" >
<asp:ListItem Text="Options Yes -1" Value="1"></asp:ListItem>
<asp:ListItem Text="Options Yes -2" Value="2"></asp:ListItem>
<asp:ListItem Text="Options Yes -3" Value="3"></asp:ListItem>
</asp:RadioButtonList>
<br /><br />
NO -- Options
<asp:RadioButtonList ID="rbtnMainNo" runat="server" Enabled="false">
<asp:ListItem Text="Options No -1" Value="1"></asp:ListItem>
<asp:ListItem Text="Options No -2" Value="2"></asp:ListItem>
<asp:ListItem Text="Options No -3" Value="3"></asp:ListItem>
</asp:RadioButtonList>
<br /><br />
<asp:Button ID="btnSave" runat="server" Text="Save" />
</div>
</form>
</body>
</html>
Keep Smiling :)
Thanks,
Shari
tusharrs
Contributor
3230 Points
668 Posts
Re: Enable Disable RadioButtonList with another RadiobButtonList Selection ASP.NET
May 04, 2012 09:14 AM|LINK
<script type="text/javascript" language="javascript">
// function to check if radio buttons are clicked
function validaterb() {
var sel = "0";
if (document.getElementById('rbtnMain_0') != null) {
if (document.getElementById('rbtnMain_0').checked) {
sel = "1";
if ((document.getElementById('rbtnMainYes_0').checked == false)
&& (document.getElementById('rbtnMainYes_1').checked == false)
&& (document.getElementById('rbtnMainYes_2').checked == false)) {
alert('select option from main yes');
return false;
}
}
}
if (document.getElementById('rbtnMain_1') != null) {
if (document.getElementById('rbtnMain_1').checked) {
sel = "1";
if ((document.getElementById('rbtnMainNo_0').checked == false)
&& (document.getElementById('rbtnMainNo_1').checked == false)
&& (document.getElementById('rbtnMainNo_2').checked == false)) {
alert('select option from main no');
return false;
}
}
}
if (sel == "0") {
alert("select yes or no");
}
return true;
}
// function to enable or diable radio buttons
function endi() {
if (document.getElementById('rbtnMain_0') != null) {
if (document.getElementById('rbtnMain_0').checked) {
document.getElementById('rbtnMainYes_0').disabled = false;
document.getElementById('rbtnMainYes_1').disabled = false;
document.getElementById('rbtnMainYes_2').disabled = false;
if (! document.getElementById('rbtnMainNo_0').disabled) {
document.getElementById('rbtnMainNo_0').disabled = !document.getElementById('rbtnMainNo_0').disabled;
document.getElementById('rbtnMainNo_1').disabled = !document.getElementById('rbtnMainNo_1').disabled;
document.getElementById('rbtnMainNo_2').disabled = !document.getElementById('rbtnMainNo_2').disabled;
document.getElementById('rbtnMainNo_0').checked = false;
document.getElementById('rbtnMainNo_1').checked = false;
document.getElementById('rbtnMainNo_2').checked = false;
}
}
else {
}
}
if (document.getElementById('rbtnMain_1') != null) {
if (document.getElementById('rbtnMain_1').checked) {
document.getElementById('rbtnMainNo_0').disabled = false;
document.getElementById('rbtnMainNo_1').disabled = false;
document.getElementById('rbtnMainNo_2').disabled = false;
if (! document.getElementById('rbtnMainNo_0').disabled) {
document.getElementById('rbtnMainYes_0').disabled = !document.getElementById('rbtnMainYes_0').disabled;
document.getElementById('rbtnMainYes_1').disabled = !document.getElementById('rbtnMainYes_1').disabled;
document.getElementById('rbtnMainYes_2').disabled = !document.getElementById('rbtnMainYes_2').disabled;
document.getElementById('rbtnMainYes_0').checked = false;
document.getElementById('rbtnMainYes_1').checked = false;
document.getElementById('rbtnMainYes_2').checked = false;
}
}
}
}
</script>
radiobuttonlist has some changes
<div> <asp:RadioButtonList ID="rbtnMain" runat="server" onchange="endi()"><asp:ListItem Text="YES" Value="1"></asp:ListItem> <asp:ListItem Text="NO" Value="0"></asp:ListItem> </asp:RadioButtonList> <br /> <br /> <asp:RadioButtonList ID="rbtnMainYes" runat="server"> <asp:ListItem Text="Options Yes -1" Value="1" Enabled="false"></asp:ListItem> <asp:ListItem Text="Options Yes -2" Value="2" Enabled="false"></asp:ListItem> <asp:ListItem Text="Options Yes -3" Value="3" Enabled="false"></asp:ListItem> </asp:RadioButtonList> <br /> <br /> <asp:RadioButtonList ID="rbtnMainNo" runat="server"> <asp:ListItem Text="Options No -1" Value="1" Enabled="false"></asp:ListItem> <asp:ListItem Text="Options No -2" Value="2" Enabled="false"></asp:ListItem> <asp:ListItem Text="Options No -3" Value="3" Enabled="false"></asp:ListItem> </asp:RadioButtonList> <br /> <br /> <asp:Button ID="btnSave" runat="server" Text="Save" OnClientClick="return validaterb()" /> </div>( Mark as Answer if it helps you out )
View my Blog