Radio buttons not responding to Javascript as expected

EDN Admin

Well-known member
Joined
Aug 7, 2010
Messages
12,794
Location
In the Machine
<p style="margin-bottom:0in; margin-bottom:.0001pt; line-height:normal <span style="font-size:10.0pt I have an ASP.NET app where I create an HTML table with rows of data. Each row includes a checkbox and radio button (among other items). When the checkbox
is checked, I want the radio button enabled; when the checkbox is un-checked, I want it disabled. (the client is ALWAYS IE8 or 9)<br/>

<p style="margin-bottom:0in; margin-bottom:.0001pt; line-height:normal <span style="font-size:10.0pt
<p style="margin-bottom:0in; margin-bottom:.0001pt; line-height:normal
<p style="margin-bottom:0in; margin-bottom:.0001pt; line-height:normal <span style="font-size:10.0pt I have the following code that loops thru data and creates rows in the table with a checkbox and radio button (along with a few other elements):<br/>

<p style="margin-bottom:0in; margin-bottom:.0001pt; line-height:normal <span style="font-size:10.0pt
<p style="margin-bottom:0in; margin-bottom:.0001pt; line-height:normal <span style="font-size:10.0pt ========================================
<p style="margin-bottom:0in; margin-bottom:.0001pt; line-height:normal <span style="font-size:10.0pt For Each dr As DataRow In ds.Tables(0).Rows<br/>
<span style="font-size:10pt iRowCount += 1<br/>

<p style="margin-bottom:0in; margin-bottom:.0001pt; line-height:normal <span style="font-size:10pt rw = New TableRow<br/>
<span style="font-size:10pt <br/>
cl = New TableCell<br/>
<span style="font-size:10pt chk = New CheckBox()<br/>
<span style="font-size:10pt chk.ID = "chkInclude" & iRowCount.ToString<br/>
<span style="font-size:10pt chk.Checked = bInclude<br/>
<span style="font-size:10pt cl.Controls.Add(chk)<br/>
<span style="font-size:10pt rw.Cells.Add(cl)<br/>
<br/>

<p style="margin-bottom:0in; margin-bottom:.0001pt; line-height:normal <span style="font-size:10.0pt
<p style="margin-bottom:0in; margin-bottom:.0001pt; line-height:normal
<p style="margin-bottom:0in; margin-bottom:.0001pt; line-height:normal <span style="font-size:10.0pt cl = New TableCell<br/>
<span style="font-size:10pt rad = New RadioButton<br/>
<span style="font-size:10pt rad.Checked = (the value will either be true or false, depending on data)<br/>
<span style="color:red; font-size:10pt This line causes the problem<br/>
<span style="font-size:10.0pt; color:red rad.Enabled = (the value will either be true or false, depending on data)<br/>
<span style="font-size:10pt rad.GroupName = "radDefaultGroup"<br/>
<span style="font-size:10pt rad.ID = "radDefault" & iRowCount.ToString<br/>
<span style="font-size:10pt cl.Controls.Add(rad)<br/>
<span style="font-size:10pt rw.Cells.Add(cl)<br/>
<br/>
<span style="font-size:10pt Table1.rows.add rw<br/>
<br/>

<p style="margin-bottom:0in; margin-bottom:.0001pt; line-height:normal <span style="font-size:10.0pt chk.Attributes.Add("onClick", "EnableDisable(" & chk.UniqueID & "," & rad.ClientID &<br/>
);")
<p style="margin-bottom:0in; margin-bottom:.0001pt; line-height:normal <span style="font-size:10.0pt Next<br/>
<span style="font-size:10pt ========================================
<p style="margin-bottom:0in; margin-bottom:.0001pt; line-height:normal <span style="font-size:10pt <span style="font-size:10.0pt <br/>

<p style="margin-bottom:0in; margin-bottom:.0001pt; line-height:normal <span style="font-size:10.0pt
<p style="margin-bottom:0in; margin-bottom:.0001pt; line-height:normal
<p style="margin-bottom:0in; margin-bottom:.0001pt; line-height:normal <span style="font-size:10.0pt Im passing the "ClientID" of the checkbox and radio button to the following javascript function on the OnClick event of the checkbox:
<p style="margin-bottom:0in; margin-bottom:.0001pt; line-height:normal <span style="font-size:10.0pt
<p style="margin-bottom:0in; margin-bottom:.0001pt; line-height:normal <span style="font-size:10.0pt
<p style="margin-bottom:0in; margin-bottom:.0001pt; line-height:normal <span style="font-size:10.0pt ========================================
<p style="margin-bottom:0in; margin-bottom:.0001pt; line-height:normal <span style="font-size:10.0pt function EnableDisable(chk, rad) {<br/>

<div style="text-indent:0px <span style="font-size:10pt; text-indent:0.5in; white-space:pre <span style="font-size:10pt; text-indent:0.5in if (chk.checked) {

<p style="margin-bottom:0in; text-indent:.5in; line-height:normal <span style="font-size:10.0pt rad.disabled = false;
<p style="margin-bottom:0in; margin-bottom:.0001pt; text-indent:.5in; line-height:normal
<span style="font-size:10.0pt } else {
<p style="margin-bottom:0in; text-indent:.5in; line-height:normal <span style="font-size:10.0pt rad.disabled = true;
<p style="margin-bottom:0in; margin-bottom:.0001pt; line-height:normal <span style="font-size:10.0pt }
<p style="margin-bottom:0in; margin-bottom:.0001pt; line-height:normal <span style="font-size:10.0pt ========================================
<p style="margin-bottom:0in; margin-bottom:.0001pt; line-height:normal
<p style="margin-bottom:0in; margin-bottom:.0001pt; line-height:normal <span style="font-size:10.0pt
<p style="margin-bottom:0in; margin-bottom:.0001pt; line-height:normal <span style="font-size:10.0pt <br/>
If the line of code in RED is hard-coded to “TRUE”, everything works as expected, except for the fact that some of the radio buttons should be disabled, but arent.

<p style="margin-bottom:0in; margin-bottom:.0001pt; line-height:normal <span style="font-size:10.0pt
<p style="margin-bottom:0in; margin-bottom:.0001pt; line-height:normal <span style="font-size:10.0pt However, if the line of code in RED is dynamic, and the data requires a radio button to be initially disabled, the code does NOT work on any of the radio
buttons that start off as disabled. By "code not working", I mean that the Javascript seems to work, but although I see a change in the radio button appearance when the checkbox is checked, the radio buttons are not enabled)<br/>
<span style="font-size:10pt <br/>
I’ve created a “hello world” app with the same master page, same includes, etc. It has the exact code, except for the fact that data isn’t coming from a database and one program is a LOT smaller, and it works.<br/>
<br/>

<p style="margin-bottom:0in; margin-bottom:.0001pt; line-height:normal <span style="font-size:10.0pt
<p style="margin-bottom:0in; margin-bottom:.0001pt; line-height:normal <span style="font-size:10.0pt I know that there HAS to be something different between the two sets of code, but I’ve been working on this for days and can’t find what’s going on.<br/>

<p style="margin-bottom:0in; margin-bottom:.0001pt; line-height:normal <span style="font-size:10.0pt
<p style="margin-bottom:0in; margin-bottom:.0001pt; line-height:normal
<p style="margin-bottom:0in; margin-bottom:.0001pt; line-height:normal <span style="font-size:10.0pt Anyone have any ideas??<br/>
<span style="font-size:10pt <br/>
Thanks,<span style="font-size:10.0pt <br/>

<p style="margin-bottom:0in; margin-bottom:.0001pt; line-height:normal
Bert Sirkin
<br/>
<br/>
<br/>

View the full article
 
Back
Top