Question

在我的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);
        }
    }
});

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

Answer 1

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

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

当未检查收音机时，它未经检查，因此无需再次检查状态。

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

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

Answer 2

使用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的问题，正如his answer中未定义所指出的那样。

启用/禁用选择是否选中无线电

2 个答案: