如何實現分層可選部分？

我想實現，使用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

如何實現分層可選部分？

回答

相關問題