계층 적 선택 섹션을 구현하는 방법은 무엇입니까?

Question

javascript와 jquery (1.9.1)를 사용하여 선택적 섹션의 개념을 구현하고 싶습니다.

기본적으로 전체 섹션 (div)을 사용하거나 사용하지 않도록 설정할 수있는 checkbox이 있습니다. 예상대로이가 작동

$(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();      
    }); 
}); 

:

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

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

및 스크립트 : 여기

나는 작동 코드가 있습니다.

그러나이 코드는 중첩 된 선택 섹션을 지원하지 않습니다. 상위 옵션 섹션이 활성화되면 서브 섹션에서 가능한 존재에 관한 것이 아닌 전체 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입니다.

기본적으로 생각은 동작을 변경하는 것이 었습니다. 이제 전체 페이지 섹션 가용성을 새로 고치는 방법이 있습니다.

그리고 체크 박스가 변경되면 선택한 섹션 만 새로 고치는 대신 전체 섹션이 새로 고쳐집니다.

내 자바 스크립트는 다음과 같습니다

$(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의 사용 참조)