0

javascript と jquery (1.9.1) を使用して、オプション セクションの概念を実装したいと考えています。

基本的に、checkboxセクション全体を有効または無効にする があります (これは ですdiv)。

ここに作業コードがあります：

<div class="optional">
    <span class="optional-activator"> 
        <input type="checkbox" ></input>
    </span>

    <div class="optional-section">
        <input type="text" value="sometext" />
    </div>
</div>

とスクリプト：

$(function () {
    $(".optional").each(function () {
        var $this = $(this);
        var activator = $this.find(".optional-activator :input");
        var section = $this.find(".optional-section");

        var sectionStateUpdate = function () {
            if (activator.prop('checked')) {
                section.find(":input").prop("disabled", false);
                section.removeClass("inactive");
            } else {
                section.find(":input").prop("disabled", true);
                section.addClass("inactive");
            }
        };
        activator.change(sectionStateUpdate);
        sectionStateUpdate();                       
    });
});

これは期待どおりに機能しています。

ただし、このコードはネストされたオプション セクションをサポートしていません。上位のオプション セクションを有効にすると、下位セクションに存在する可能性に関係なく、子孫全体inputも有効になります。

たとえば、次のスニペットは期待どおりに機能しません。

<div class="optional"> 
    <span class="optional-activator"> 
        <input type="checkbox" />
    </span>

    <div class="optional-section">
        <input type="text" value="sometext2" />
        <div class="optional"> 
            <span class="optional-activator"> 
                <input type="checkbox" />
            </span>

            <div class="optional-section">
                <input type="text" value="sometext3" />
            </div>
        </div>
    </div>
</div>

ネストをサポートするようにコードを更新するにはどうすればよいですか?

より正確には、ルールは次のとおりです。

  • オプション セクションが無効になっている場合、ネストされたオプション セクションにある場合でも、セクション内のすべての入力コントロールが無効になります。
  • オプション セクションが有効な場合、すべての直接入力コントロールも有効になりますが、ネストされたオプション セクションは独自のアクティベーターを反映する必要があります。

これらのスニペットをjsfiddle コードに書き込んで、自分の動作を説明しました。

4

1 に答える 1

0

解決策はここに表示されます。

基本的に、アイデアは動作を変更することでした。現在、ページ セクション全体の可用性を更新する方法があります。

また、チェックボックスのいずれかが変更されると、選択したセクションのみが更新されるのではなく、セクション全体が更新されます。

私のjavascriptは次のとおりです。

$(function () {
    var refresh = function () {
        $(".optional").each(function () {
            var $this = $(this);
            var activator = $this.find(".optional-activator :input");
            var section = $this.find(".optional-section");

            if (activator.prop('checked')) {
                section.find(":input").filter(":not(.optional-section)").prop("disabled", false);
                section.removeClass("inactive");
            } else {
                section.find(":input").prop("disabled", true);
                section.addClass("inactive");
            }
        });
    };
    $(".optional-activator :input").change(refresh);
    refresh();
});

トリッキーな部分は、トップ セクションをアクティブにするときにネストされたセクションを除外することでした (の使用法を参照.filter) 。

于 2013-02-21T10:03:18.580 に答える