jquery checkbox enable/disable radiobuttonlist

Question

I have a Checkbox and disabled Radiobuttonlist in same table row and different td and just trying to enable/disable it when I check/uncheck a checkbox.

<tr class = "main">
    <td colspan="2">
      <input id="CheckOne" type="checkOne" name="checkOne" />
      <label for="CheckOne">Some Text</label>
    </td>
    <td align="center">
        <table id="RadioButtonListOne" disabled="disabled" title="Choices" border="0">
        <tr>
         <td>
                    <span disabled="disabled">
                    <input id="RadioButtonListOne_0" type="radio" name="RadioButtonListOne" value="Y" disabled="disabled" />
                    <label for="RadioButtonListOne_0">Yes</label></span>
               </td>
               <td>
                    <span disabled="disabled"><input id="RadioButtonListOne_1" type="radio" name="RadioButtonListOne" value="N" disabled="disabled" />
                    <label for="RadioButtonListOne_1">No</label>
                    </span>
               </td>       
           </tr>
        </table>
     </td>
  </tr>

This is how original server-side html looks like:

   <tr class = "main">
       <td colspan="2">
            <asp:CheckBox ID="CheckBoxOne" runat="server" Text="Some Text"/>
       </td>
       <td align="center">
            <asp:RadioButtonList ID="RadioButtonListOne" RepeatDirection="Horizontal">
                  <asp:ListItem Value="Y">Yes asp:ListItem>
                  <asp:ListItem Value="N">No</asp:ListItem>
             </asp:RadioButtonList>
        </td>
   </tr>

For some reason when I am trying something obvious to do that, i.e.

    $('#<%= CheckBoxOne.ClientID %>').click(function()
    {
        if ($(this).is(":checked"))
        {
             $('#<%= RadioButtonListOne.ClientID%> input:radio').removeAttr('disabled');

        }
        else 
        {
              $('#<%= RadioButtonListOne.ClientID%> input:radio').attr('disabled', 'disabled');
        }
    });

then doesn't work, but logically it should. What am I doing wrong here?

Answer 1

why are you including <%= RadioButtonListOne.ClientID% input:radio in your jquery code, also you are missing the trailing > symbol

$('#<%= RadioButtonListOne.ClientID%> input:radio').removeAttr('disabled');

is your jquery code in the same page so it is processed by the server before being downloaded by the client? Stuff like <%= RadioButtonListOne.ClientID%> won't work outside of either php, asp, or html.erb and the like files

you could try changing your if check to this

if ($(this).attr('checked') == 'checked') 

instead of .is(':checked')

Answer 2

Your checkbox's ID is "CheckOne":

<input id="CheckOne" type="checkOne" name="checkOne" />

But your code looks like it's referencing a (most likely) numeric value:

$('#<%= CheckOne.ClientID %>').click(function()

Your checkbox's ID should match the ID of the client:

<input id="<%= CheckOne.ClientID %>" type="checkOne" name="checkOne" />

or

<input id="CheckOne_<%= CheckOne.ClientID %>" type="checkOne" name="checkOne" />

with the jQuery adjusted to

$('#CheckOne_<%= CheckOne.ClientID %>').click(function()

The radio button IDs have a similar problem.