根据JQuery中的下拉列表中选择的选项禁用和启用单选按钮

时间:2013-03-25 18:55:22

标签: jquery asp.net html

我有一个单选按钮选项,我希望根据从下拉列表中选择的选项禁用和启用。我最初禁用了单选按钮选项,但是当我尝试根据下拉列表中选择的选项启用它时,没有任何反应。我能得到一些帮助: HTML:

            <asp:DropDownList runat="server" ID="ddl1">
                  <asp:ListItem Text="Please Select" Value="0" />
                  <asp:ListItem Text="1" Value="1" />
                  <asp:ListItem Text="2/Staff" Value="2" />
                  <asp:ListItem Text="3" Value="3" />                      
                  <asp:ListItem Text="4" Value="4" />
                  <asp:ListItem Text="5" Value="5" />                     
            </asp:DropDownList> 
          <asp:RadioButtonList runat="server" ID="rbPType" ClientIDMode="Static">
                     <asp:ListItem Value="0" Text="T0"></asp:ListItem>
                     <asp:ListItem Value="1" Text="1"></asp:ListItem>
                     <asp:ListItem Value="2" Text="2"></asp:ListItem>
                 </asp:RadioButtonList>

JS:

$('#rbPType_1').attr("disabled", true);
$('#ddl1').change(function () {

    if ($(this).children('option:selected').text() == "2")
    {
        $('#rbPType_1').attr("disabled", false);
    }
    else
    {
        $('#rbPType_1').attr("disabled", true);
    }

});

PS:我的原意是隐藏并根据选项显示这个并且被踩了。因此,如果有一种方法可以隐藏和显示而不是启用和禁用我真的很感激帮助。

4 个答案:

答案 0 :(得分:2)

您可以使用.val()

获取下拉列表的选定值
<asp:DropDownList runat="server" ID="ddl1">
    <asp:ListItem Text="Please Select" Value="0" />
    <asp:ListItem Text="1" Value="1" />
    <asp:ListItem Text="2/Staff" Value="2" />
    <asp:ListItem Text="3" Value="3" />
    <asp:ListItem Text="4" Value="4" />
    <asp:ListItem Text="5" Value="5" />
</asp:DropDownList>
<asp:RadioButtonList runat="server" ID="rbPType" ClientIDMode="Static">
    <asp:ListItem Value="0" Text="T0"></asp:ListItem>
    <asp:ListItem Value="1" Text="1"></asp:ListItem>
    <asp:ListItem Value="2" Text="2"></asp:ListItem>
</asp:RadioButtonList>
<script>
    $('#rbPType_1').attr("disabled", true);
    $('#ddl1').change(function () {

        if ($(this).val() == '2') {
            $('#rbPType_1').attr("disabled", false);
        }
        else {
            $('#rbPType_1').attr("disabled", true);
        }

    });
</script>

答案 1 :(得分:0)

试试这个JS:

$('#rbPType_1').hide();
$('#ddl1').change(function () {
    if ($(this).val() == ("2"||"2/Staff")) {
        $('#rbPType_1').show();
    } else {
        $('#rbPType_1').hide();
    }
});

应该工作

答案 2 :(得分:0)

$('#rbPType_1').attr('disabled', 'disabled');
$('#ddl1').on('change',function () {
    if($(this).val()=='2'){
        $('#rbPType_1').removeAttr('disabled');
    }else{
        $('#rbPType_1').attr('disabled','disabled');
    }
})

答案 3 :(得分:0)

试试这个

    <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" 
        Height="28px" onselectedindexchanged="DropDownList1_SelectedIndexChanged" 
        Width="100px">
        <asp:ListItem>Value one</asp:ListItem>
        <asp:ListItem>Value Two</asp:ListItem>
    </asp:DropDownList>

并设置事件

 protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
{
    if (DropDownList1.SelectedIndex == 0)
    {
        RadioButton1.Checked = true;
    }
    else
    {
        RadioButton1.Checked = false;
    }
}

尝试此操作并根据需要实施。