0

チェックボックスに基づいて特定のフィールドの非表示と表示を管理する一般的な方法を構築しようとしています。私のプロジェクトでは、一部のフォームにチェック フィールドが含まれていることがよくあります。チェック ボックスがオンになっていると、他のフィールドに関連付けられ、チェックボックスに基づいて表示または非表示になります。

javascript の初心者で、誰かがここで正しい道を歩むのを手伝ってくれることを願っています。私のdjangoフォームでは、データ属性を使用してチェックボックスのフラグを示し、データフィールドを使用して、次のようにどのフィールドが影響を受けるかを示しました。

class PackageForm(forms.ModelForm):
    '''
    PackageForm
    '''
    class Meta:
        model = Package
        widgets = {
            'recurring_flag'      : CheckboxInput(attrs={'data-collapse-flag' : 'True'}),
            'recurring_type'      : Select(attrs={'data-collapse-id' : 'recurring_flag'}),
            'recurring_period'    : TextInput(attrs={'data-collapse-id' : 'recurring_flag'}),

        }

もちろん、jquery に関する私の限られた知識に基づいて、次のように静的に記述することができました。

$(document).ready(function() {


    $('input[data-collapse-flag]').click(function() {
       if ($(this).is(':checked')) {
           $("label[for='id_recurring_type']").show();
           $('#id_recurring_type').show();
           $("label[for='id_recurring_period']").show();
           $('#id_recurring_period').show();
       }else{
           $('#id_recurring_type').hide();
           $("label[for='id_recurring_type']").hide();
           $('#id_recurring_period').hide();
           $("label[for='id_recurring_period']").hide();
       }
    });

});

しかし、私は本当に、data-collapse-flag を読み取り、data-collapge-id を持つフィールドをループしてアクションを適用するアクションを構築する単一の JavaScript ファイルを作成したいと考えています。そのため、このシナリオが必要な場合はいつでも、すべてのフォームでスクリプトを汎用的に使用できます。

誰かがそのようなものを構築する方法についてアドバイスしたり、その方法を教えてくれたりすると、非常に感謝しています.

よろしく、

4

1 に答える 1

1

いくつかの概念的なサポートと同じように、指定された要素の子孫をループして、スイッチに基づいて動作を追加する必要がありますよね?

次のようなものを試してみたい：

  • クラス名を適切な場所に追加します: 'collapse-stack', 'collapse-label', 'collapse-list' (ラベルとリストは単に '折りたたみ可能' である場合もあります)。
  • これらの一般的な項目を jQuery でループさせます。

お気に入り：

  $(document).ready(function() {
       $('.collapse-stack').each(function(){
            //this = current collapse stack
            $(this).click(function() {
                if ( $(this).is(':checked') ) {
                    $(".collapse-label, .collapse-list").each(function(){
                        //this = current collapse-label
                        $(this).show();
                    });
                }else{
                    $(".collapse-label, .collapse-list").each(function(){
                        //this = current collapse-label
                        $(this).hide();
                    });
                }
            });
        })
    });

または何か。その「各」機能をいじってみましょう。

于 2012-07-31T22:52:02.193 に答える