locked
Need of javascript query to use radio button in HTML page RRS feed

  • Question

  •   I have a table in HTML page  with many radiobuttons  as shown in the image.when I click a radio button near to None  ,the other radio buttons inside the table must be disabled .And if the same radio button is unchecked ,I must  be able to select any number of radio buttons inside the table ..Pl provide the javascript query ..

    Thursday, June 7, 2012 1:12 PM

All replies

  • As per your description, I think you should use check-box rather radio button. I have created a small sample for you.

    Download any version of jQuery library and add reference.

    ---------------------------------------------------------------------------------------------------------------------------------------------------

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
        <script type="text/javascript">
            function toggleChecked(status) {
                $("#mainTable").find("input:checkbox").each(function () {this.disabled = status;});
            }
        </script>
    </head>
    <body>
         <table>
            <tr>
                <td>
                    <input id="Checkbox10" type="checkbox" onclick="toggleChecked(this.checked);" />
                </td>
            </tr>
        </table>
        <table width="700px" height="700px" id="mainTable">
            <tr>
                <td>Row 1</td>
                <td><input id="Checkbox1" type="checkbox" /></td>
                <td><input id="Checkbox2" type="checkbox" /></td>
                <td><input id="Checkbox3" type="checkbox" /></td>
            </tr>
            <tr>
                <td>Row 2</td>
                <td><input id="Checkbox4" type="checkbox" /></td>
                <td><input id="Checkbox5" type="checkbox" /></td>
                <td><input id="Checkbox6" type="checkbox" /></td>
            </tr>
        </table>
    </body>
    </html>

     
    Tuesday, June 19, 2012 2:30 PM