0

私はこのJavaScriptを持っています：

$(function () {
    $.fn.enable = function () {
        return this.show().removeAttr("disabled");
    }

    $.fn.disable = function () {
        return this.hide().attr("disabled", "disabled");
    }

    var incomeType = $("#MyModel_IncomeTypeCheckBox");
    var incomeTypeStatusSection = $("#incomeTypeStatusDiv, #incomeTypeStatusDiv input, #incomeTypeStatusDiv textarea, #incomeTypeStatusDiv select");
    setControls();

    incomeType.change(function () {
        setControls();
    });

    function setControls() {
        switch (incomeType.val()) {
            case "FullTime":
                incomeTypeStatusSection.disable();
                break;
            case "PartTime":
                incomeTypeStatusSection.disable();
                break;
            case "SelfEmployed":
                incomeTypeStatusSection.enable();
                break;
            case "SocialSecurity":
                incomeTypeStatusSection.disable();
                break;
            case "Retirement":
                incomeTypeStatusSection.disable();
                break;
            case "ChildSupport":
                incomeTypeStatusSection.disable();
                break;
            case "Maintenance":
                incomeTypeStatusSection.disable();
                break;
            case "Other":
                incomeTypeStatusSection.disable();
                break;
        }
    }
});

私の見解のコードは単純です：

<div id="incomeTypeStatusDiv">
   <!--Show some hidden inputs here-->
</div>

MyModel.IncomeTypeCheckBox上記の値enumに対応するに基づいています。case

たとえば、上記のjavascriptをドロップダウンリストで使用できます。選択すると、適切なが表示/非表示になります<div>。

チェックボックスリストの選択に基づいて同じコードを使用して表示/非表示にしようとしていますが、成功しません。<div>非表示にしたいのは、非表示ではなく表示されていることです。チェックボックスリストで機能しないことの何が欠けていますか？チェックボックスリストを使用してこれを機能させるにはどうすればよいですか（つまり、[SelfEmployed]チェックボックスをクリックすると適切<div>に表示され、[SelfEmployed]チェックボックスをオフにすると非表示になり<div>ますか？

私はそれをできた：

$(document).ready(function () {
    $("input[name$='stepincomeinformation.incometypecheckbox']").click(function () {
        var check_value = $(this).val();
        if (check_value == 'selfemployed') {
            $("#incometypecheckbox_selfemployed").toggle(this.checked);
        }
    });
    $("#incometypecheckbox_selfemployed").hide();
    });

ただし、<div>が非表示になっていると、検証しようとしているため、先に進むことができません。他のJavaScriptは、非表示になっている場合は検証しません<div>。

javascriptは、Mvc2を使用した動的UIの検証に基づいており、私にとってはうまく機能しています。が非表示になっている場合に検証を無効にするために使用されます（そして、バインダーだけでなく<div>modも使用します。MicrosoftMvcValidation.js

どんな助けでも大歓迎です。

以下の最終結果を参照してください（回答に基づく）

4

2 に答える 2

0

投稿したコードでは、incomeType変数が設定されています。

var incomeType = $("#MyModel_IncomeTypeCheckBox");

この時点で、それMyModel_IncomeTypeCheckBoxがすべてのincomeTypeチェックボックスに割り当てられた名前だと思います。

その場合、これはおそらく問題がある理由を説明しています。

まず、MyModel_IncomeTypeCheckBoxはIDではなく名前であるため、jQueryは経由で値にアクセスできません$('#MyModel_IncomeTypeCheckBox')

次に、jQueryがMyModel_IncomeTypeCheckBox通常のフォーム送信に含まれるものにアクセスできたとしても、残りのコードは1つのボックスがチェックされている場合にのみ機能します。これは、複数のボックスがチェックされるとMyModel_IncomeTypeCheckBox、選択したチェックボックス。

したがって、ここには2つのオプションがあります。

最初のオプションは、各チェックボックスをIDで個別にチェックするという醜いタスクですが、それは苦痛で非効率的であるため、あなたが望むものではありません。

2番目のオプションは、チェックされるincomeTypesの解釈を次のように変更することです。

function setControls() {
    $('input:checked[name="MyModel_IncomeTypeCheckBox"]:checked').each(function () {
        var checkedIncomeType = $(this).val();
        handleShowHide(checkedIncomeType);
    });
}

function handleShowHide(incomeType)
{
    // move the switch statement here
}

今はこれをテストしていませんが、少なくともそこまではほとんど到達するはずです。ご不明な点がございましたら、お気軽にお問い合わせください。

于 2012-04-30T14:35:41.590 に答える
0

私はそれを動かしました。@jimmyym715の答えは私を正しい方向に導きました。彼に信用を与える。

$(document).ready(function () {
    $("input[name$='MyModel.IncomeTypeCheckBox']").
            click(function () {
        var check_value = $(this).val();
        if (check_value == 'SelfEmployed') {
            $("#IncomeTypeCheckBox_SelfEmployed, #IncomeTypeCheckBox_
                SelfEmployed input").toggle(this.checked);
            $("#IncomeTypeCheckBox_SelfEmployed, #IncomeTypeCheckBox
                _SelfEmployed input").removeAttr("disabled");
        }
        else if (check_value != 'SelfEmployed') {
            $("#IncomeTypeCheckBox_SelfEmployed, 
                #IncomeTypeCheckBox_SelfEmployed input").
                    hide().attr("disabled", "disabled");
        }
 });
    $("#IncomeTypeCheckBox_SelfEmployed, 
        #IncomeTypeCheckBox_SelfEmployed input").hide().
            attr("disabled", "disabled");
});

少し調整する必要がありますが、ほとんどあります。

于 2012-05-01T17:58:55.690 に答える