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/

また、私が気付いたもう 1 つのこと: あなたの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);
    }
}

このようにして、コードはもう少し単純になり、 undefined が彼の回答notで指摘したように、誤って使用する問題を回避できます。

于 2012-11-01T08:10:21.353 に答える