How to write jQuery to disable dropdown on selecting an item from radiobutton list

Question

I have this code but it doesn't work with asp.net page which has a master page along with ajax control toolkit(I have included ToolScriptManager). The code is

<script type="text/javascript">
    jQuery(function() {


        $("#<%=RadioButtonList1.ClientID%>").change(function() {
            var rbvalue = $("input[@name=<%=RadioButtonList1.UniqueID%>]:radio:checked").val();
            if (rbvalue == "No") {
                $("#DropDownList1").attr("disabled", false);
            }
            else if (rbvalue == "Yes") {
                $("#DropDownList1").attr("disabled", true);
            }
        });
    });
</script>

While I'm not sure it's the root cause, the first thing to do is change those `.attr()` calls to `.attr("disabled", "")` and `.attr("disabled", "disabled")`, respectively. — Interrobang, Dec 16 '11 at 10:13
Your attribute selector should be `input[name=<%=RadioButtonList1.UniqueID%>]` instead of `input[@name=...]`. This is a CSS selector, not an XPath query :) — Frédéric Hamidi, Dec 16 '11 at 10:15
@Interrobang;@Frederic; The code just works fine without master page and AjaxToolscript. But with master page and ToolScript manager the client side code script doesn't run at all. — Anees Jafrey, Dec 16 '11 at 10:41
Hey Guys I got the root cause. It is because of master page. But I am unable to solve. may be its due to navigation. Can anyone solve the problem? — Anees Jafrey, Dec 16 '11 at 11:25

score 1 · Answer 1 · edited Mar 30 '12 at 08:48

<script type="text/javascript">
    $(document).ready(function() {

        $('#RadioButtonList1').change(function() {
            var rbvalue = $('#RadioButtonList1').val();
            if (rbvalue == "No") {
                $('#DropDownList1').attr('disabled', false);
            }
            else if (rbvalue == "Yes") {
                $('#DropDownList1').attr('disabled', true);
            }
        });
    });
</script>

score 0 · Answer 2 · edited May 23 '17 at 12:03

If it works fine without the Master Page, you have to look at what that might change. The easiest answer is that it introduces a javascript bug that causes the rest of the code not to execute. I'd try a few things:

View the source of this code both when working and not. Just to confirm that the .NET code is properly replacing the RadioButton ID values.
Assuming the code is the same, load the page with the Master Page (non-working version) and open either Firebug in FireFox or the Chrome debugger. Make sure there are no javascript errors on page load. In fact, this is also a good way to confirm the code is running as expected because you can put in javascript break points.
Or the simple way - add an alert('here!'); within the change function (above "var rbvalue = ..."). That'll confirm whether it's running or not, which will help you determine if the bug is caused by that function not running, or running incorrectly.

How to write jQuery to disable dropdown on selecting an item from radiobutton list

2 Answers2