0

我想使用 javascript 和 jquery (1.9.1) 来实现可选部分的概念。

基本上，我有一个checkbox启用或禁用整个部分（即 a 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 回答