0

在我的 HTML 中，我想检查单选按钮的状态，看看它们是启用还是禁用。我有这个 HTML 结构：

 <table>
                        <tr>
                            <td style="width:20px;">
                                <input type="radio" id="rdoLevel" name="rdoSelect"/>
                            </td>
                            <td>ارسال براساس مقطع : </td>
                            <td>
                                <asp:DropDownList ID="ddlTypeLevel" runat="server" ClientIDMode="Static" Enabled="False">
                                    <asp:ListItem></asp:ListItem>
                                    <asp:ListItem>ابتدایی</asp:ListItem>
                                    <asp:ListItem>راهنمایی</asp:ListItem>
                                    <asp:ListItem>دبیرستان</asp:ListItem>
                                    <asp:ListItem>پیش دانشگاهی</asp:ListItem>
                                    <asp:ListItem>دانشگاه</asp:ListItem>
                                </asp:DropDownList>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="radio" id="rdoBase" name="rdoSelect"/>
                            </td>
                            <td>ارسال براساس پایه :</td>
                            <td>
                                <asp:DropDownList ID="ddlTypeBase" runat="server" ClientIDMode="Static"  Enabled="False">
                                    <asp:ListItem></asp:ListItem>
                                    <asp:ListItem>اول</asp:ListItem>
                                    <asp:ListItem>دوم</asp:ListItem>
                                    <asp:ListItem>سوم</asp:ListItem>
                                </asp:DropDownList>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="radio" id="rdoSchool" name="rdoSelect" />
                            </td>
                            <td>ارسال براساس مدرسه :</td>
                            <td>
                                <asp:TextBox ID="txtSchooNameType" runat="server" ClientIDMode="Static"  Enabled="False"></asp:TextBox>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <input type="radio" id="rdoTypeRegistre" name="rdoSelect"/>
                            </td>
                            <td>ارسال براساس نوع ثبت نام :</td>
                            <td>
                                <asp:DropDownList ID="ddlTypeRegister" runat="server" ClientIDMode="Static" 
                                    Enabled="False">
                                    <asp:ListItem></asp:ListItem>
                                    <asp:ListItem>ثبت نام</asp:ListItem>
                                    <asp:ListItem>پیش ثبت نام</asp:ListItem>
                                </asp:DropDownList>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3">
                                <asp:Button ID="btnSendByCategory" Enabled="false" runat="server" CssClass="btn btn-small rtl"
                                    Text="ارسال" />
                            </td>
                        </tr>
                    </table>

我使用这个 jquery 代码来检查状态：

$("input:radio").click(function () {
    var id = $(this).attr("id");
    var ddlTypeLevel = $("#ddlTypeLevel");
    if (id == "rdoLevel") {
        if ($(this).is(':checked')) {
            $('select#ddlTypeLevel').prop('disabled', false);
        } else if ($(this).not(':checked')) {
            $('select#ddlTypeLevel').prop('disabled', true);
        }
    }
    else if (id == "rdoBase") {
        if ($(this).is(':checked')) {
            $('select#ddlTypeBase').prop('disabled', false);
        } else if ($(this).not(':checked')) {
            $('select#ddlTypeBase').prop('disabled', true);
        }
    }
    else if (id == "rdoSchool") {
        if ($(this).is(':checked')) {
            $('#txtSchooNameType').prop('disabled', false);
        } else if ($(this).not(':checked')) {
            $('#txtSchooNameType').prop('disabled', true);
        }
    }
    else if (id == "rdoTypeRegistre") {
        if ($(this).is(':checked')) {
            $('select#ddlTypeRegister').prop('disabled', false);
        } else if ($(this).not(':checked')) {
            $('select#ddlTypeRegister').prop('disabled', true);
        }
    }
});

但是上面的代码不起作用。只有启用检查有效。

4

2 回答 2

3

not不返回布尔值，您可以使用否定运算符：

} else if (!$(this).is(':checked')) {

此外，当未选中收音机时，它也未选中，因此无需再次检查状态。

$("input[type=radio]").change(function () {
    var id = this.id.replace('rdo', ''); 
    $('#ddlType'+id).prop('disabled', !this.checked);     
});

根据您当前的逻辑，您可以缩小代码。请注意，:radio选择器已弃用。

于 2012-11-01T07:54:05.590 回答
1

使用attr而不是prop禁用元素。

此外，您可以在函数开始时禁用所有元素，然后仅启用与所选单选按钮对应的元素。

您的代码可能如下所示：

$("input:radio").click(function () {
    var id = $(this).attr("id");

    $('select').attr('disabled', 'true');

    if (id == "rdoLevel") {
        if ($(this).is(':checked')) {
            $('select#ddlTypeLevel').attr('disabled', false);
        }
    }
    else if (id == "rdoBase") {
        if ($(this).is(':checked')) {
            $('select#ddlTypeBase').attr('disabled', false);
        }
    }
    else if (id == "rdoSchool") {
        if ($(this).is(':checked')) {
            $('#txtSchooNameType').attr('disabled', false);
        }
    }
    else if (id == "rdoTypeRegistre") {
        if ($(this).is(':checked')) {
            $('select#ddlTypeRegister').attr('disabled', false);
        }
    }
});​

这是一个工作示例：http: //jsfiddle.net/bujkw/2/

if(enabled){}else if(not enabled){}另外，我注意到的另一件事：您可以简单地做而不是您的方法if(enabled){}else{}。

具体来说，而不是

if (id == "rdoLevel") {
    if ($(this).is(':checked')) {
        $('select#ddlTypeLevel').prop('disabled', false);
    } else if ($(this).not(':checked')) {
        $('select#ddlTypeLevel').prop('disabled', true);
    }
}

你可以简单地写

if (id == "rdoLevel") {
    if ($(this).is(':checked')) {
        $('select#ddlTypeLevel').prop('disabled', false);
    } else {
        $('select#ddlTypeLevel').prop('disabled', true);
    }
}

这样代码就更简单了，并且避免了使用不正确的问题，正如他的回答not中未定义所指出的那样。

于 2012-11-01T08:10:21.353 回答