RadioButtonList关联TextBox禁用/启用功能失效，请求排查

我来帮你排查下问题哈，你的jQuery代码有几个小问题导致无法正常运行，咱们一步步来修正：

1. 语法错误（最直接的原因） #

你写的代码里有两处明显的语法问题：

• 所有("#RadioButtonList1").val()都少了$符号，jQuery选择器必须以$开头，正确写法是$("#RadioButtonList1")
• 代码结尾的括号不匹配：} ); });应该改成} });，不然浏览器会报语法错误，直接跳过这段代码的执行

2. ASP.NET服务器控件的ID渲染问题 #

因为你的RadioButtonList1是带runat="server"的服务器控件，ASP.NET会自动生成客户端ID（比如类似ctl00_MainContent_RadioButtonList1），直接写$("#RadioButtonList1")根本找不到对应的元素。

解决这个问题有两种方式：

• 方式一：用<%= RadioButtonList1.ClientID %>获取服务器控件真实的客户端ID
• 方式二：如果你的项目是ASP.NET 4.0及以上，给RadioButtonList设置ClientIDMode="Static"，这样客户端ID就和服务器端的ID完全一致：

<asp:RadioButtonList ID="RadioButtonList1" runat="server" ClientIDMode="Static" style="margin-left: 47px" Width="153px">
    <asp:ListItem Value="1">Round Trip</asp:ListItem>
    <asp:ListItem Value="0">One Way</asp:ListItem>
</asp:RadioButtonList>

3. 获取RadioButtonList选中值的方式错误 #

RadioButtonList在页面上渲染后是一组<input type="radio">元素（包裹在table里），直接调用$("#RadioButtonList1").val()是拿不到选中值的，必须找到它里面被选中的radio元素来取value。

修正后的完整代码 #

方式一（不设置ClientIDMode） #

$(function () {
    // 封装获取选中值的函数，方便复用
    function getSelectedRadioValue() {
        return $("#<%= RadioButtonList1.ClientID %> input:checked").val();
    }

    // 页面加载时先初始化TextBox的状态（避免刚加载时状态不对）
    var initialValue = getSelectedRadioValue();
    $("#<%= TextBox_ArrivalDate.ClientID %>").prop("disabled", initialValue !== "1");

    // 给所有radio绑定change事件
    $("#<%= RadioButtonList1.ClientID %> input").change(function() {
        var selectedValue = getSelectedRadioValue();
        if (selectedValue === "1") {
            $("#<%= TextBox_ArrivalDate.ClientID %>").prop("disabled", false);
        } else {
            $("#<%= TextBox_ArrivalDate.ClientID %>").prop("disabled", true);
        }
    });
});

方式二（设置ClientIDMode="Static"） #

$(function () {
    function getSelectedRadioValue() {
        return $("#RadioButtonList1 input:checked").val();
    }

    // 初始化状态
    $("#TextBox_ArrivalDate").prop("disabled", getSelectedRadioValue() !== "1");

    // 绑定事件
    $("#RadioButtonList1 input").change(function() {
        $("#TextBox_ArrivalDate").prop("disabled", getSelectedRadioValue() !== "1");
    });
});

这样修改后，当选中Round Trip（Value=1）时，TextBox会被启用；选中One Way（Value=0）时，TextBox会被禁用，页面加载时也会根据初始选中状态自动设置TextBox的状态。

内容的提问来源于stack exchange，提问作者Sarah Aldosari