Question

我想使用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 code来说明我的行为。

Answer 1

解决方案可见here。

基本上，这个想法是改变行为。现在有一种方法可以刷新整个页面部分的可用性。

当更改任何复选框时，将刷新整个部分，而不是仅刷新所选部分。

我的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的用法）

如何实现分层可选部分？

1 个答案: