0

チェックボックスリストがあります。各チェックボックスには、チェックボックスの名前に独自のIDが追加されています。私が求めている動作は、1つのチェックボックス（ここでは「SelfEmployed」）がチェックされている場合、非表示<div>が表示されることです。チェックを外すと、<div>が非表示になります。デフォルトでは<div>非表示になっています。内部に<div>は他の入力があり、この場合はtextbox。

私が使用しているコードは、4回のうち3回動作します。これについては、以下で説明します。

これは、MVCビューの上部にあるjqueryコードです。

$(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");
});

（注：私はその行をハードリターンしました-SOがコードを自動的にワードラップしてスクロールバーにつながる方法が好きではありません）

この"disabled"部分は重要であり、入力の属性として追加/削除されます。私は検証バインダーを使用していますが、これは基本的に、非表示内の入力が<div>検証エラーをスローすることを許可しません（明らかに、<div>入力を含むが表示されると、その属性が削除され、検証エラーが機能します）。

ページには、チェックボックスリストと1つのテキストボックス入力があります。両方が必要です（チェックボックスはカスタム[Mandatory]データ注釈属性を使用します）。<div>別のテキストボックス入力で隠されているものもあります。これらはシナリオです（そのうち4つのうち3つが機能します）：

  1. ページが読み込まれます。「SelfEmployed」はチェックされていません。[送信]をクリックすると、チェックボックスで何も選択されていない場合や最初のテキストボックスが空の場合に検証が実行されます。内には属性がに設定されているため、 hidden<div>は検証を起動しません。期待される動作-合格。<input>disabled="disabled"
  2. ページが読み込まれます。チェックボックスで「SelfEmployed」以外のものを選択し、テキストボックスに何かを入力すると、ページを送信できます。内には属性がに設定されているため、 hidden<div>は検証を起動しません。期待される動作-合格。<input>disabled="disabled"
  3. ページが読み込まれます。チェックボックスで「SelfEmployed」を選択すると、以前<div>はその2番目のテキストボックスで非表示になっていたことが表示されます。チェックボックスに何かがチェックされており、現在表示されている最初のテキストボックスと2番目のテキストボックスの両方に何かが入力された場合<div>（つまり、disabled="disabled"属性が2番目のテキストボックスから削除された<input>場合）、ページは送信されます。期待される動作-合格。
  4. ページが読み込まれます。＃3と同じですが、今回を除いて、で2番目のテキストボックスに入力せず<div>に送信しようとすると、その2番目のテキストボックスで検証エラーがスローされます（予期されます）。その2番目のテキストボックスに入力してページを送信すると、機能します（期待どおり）。ただし、それでも検証エラーが表示され、[SelfEmployed]チェックボックスのチェックを外して（<div>これが再び非表示になることが予想されます）、ページを送信しようとすると（検証はチェックボックスと最初のテキストボックスに渡されます）、送信されません。 。不合格。

HTMLソースをチェックすると、disabled="disabled"上記のシナリオ＃4で[SelfEmployed]チェックボックスが選択されていない場合（これにより、が非表示になります<div>）、属性が再挿入されていないことがわかります。これは、コンテナが表示されたときに2番目のテキストボックスで検証エラーがスローされた場合にのみ発生し<div>ます。その後、コンテナを再度非表示にして送信を試みます。送信（および検証の実行）を試みずに[SelfEmployed]チェックボックスをオン/オフにすると、Chromeの開発ツールでタグdisabled="disabled"にそれぞれ追加および削除されていることがわかります。<input>

その最後の問題をどのように修正できますか？ありがとう。

4

1 に答える 1

0

これは私のために働いています：

$(document).ready(function () 
    {
        $("input[name$='StepIncomeInformation.IndividualIncomeTypeCheckBox']").click(function () {
            if ($('#StepIncomeInformation_IndividualIncomeTypeCheckBox_SelfEmployed').is(':checked')) {
                $('#IndividualIncomeTypeCheckBox_SelfEmployed, #IndividualIncomeTypeCheckBox_SelfEmployed input').show().removeAttr("disabled");
            }
            else {
                $('#IndividualIncomeTypeCheckBox_SelfEmployed, #IndividualIncomeTypeCheckBox_SelfEmployed input').hide().attr("disabled", "disabled");
            }
        });
        $("#IndividualIncomeTypeCheckBox_SelfEmployed, #IndividualIncomeTypeCheckBox_SelfEmployed input").hide().attr("disabled", "disabled");
    });
于 2012-05-03T04:02:54.590 に答える