如何实现分层可选部分？

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

来源

2013-02-21 Steve B

downvote时排除嵌套部分？请证明，如果我能改善我的问题 – 2013-02-21 08:16:55

解决方案是可见的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使用）

来源

2013-02-21 10:03:18

如何实现分层可选部分？

回答

相关问题