모두 선택 (모든 체크 박스에 따라 다름)

Question

"모든 체크 박스 선택"및 "의존 체크 박스"기능을 가지고 있지만 원하는대로 작동하지 않습니다. 1. "모두 선택"을 선택하면 "제어 됨"확인란이 비활성화 된 채로 유지됩니다. 2. "컨트롤러"를 사용하여 "제어되는"확인란을 활성화하고 "모두 선택"을 사용하는 경우 "제어 된"Chackbox가 활성 상태를 유지합니다. 선택하지 않을 때는 비활성 상태로 유지해야합니다.

이 문제를 해결하기 위해 if 문을 (주석으로) 만들려고했지만 예상대로 작동하지 않습니다. 다른 해결책이 있습니까 아니면 "모두 선택"확인란의 선택을 취소 한 후 확인란을 재설정하는 것이 더 좋을까요? 리셋의 경우 전체 양식이 아닌 확인란 그룹 만 재설정해야합니다.

$('form').ready(function() { 
    var $check1 = $('input[id*=selectAll]'), 
     $check2 = $('tr th :checkbox'), 
     $checkAll = $check1.add($check2); 
    $checkAll.on('click keydown', function() { 
     var checkedStatus = this.checked, 
      $selected1 = $(this).closest(".formFieldWrapper").find('input:checkbox:not(:first):not([data-leader])'), 
      $selected2 = $(this).closest("table").find('tr td :checkbox'), 
      $selectedAll = $selected1.add($selected2); 
      $selectedAll.each(function() { 

      // if($checkAll.prop('checked', true)) { 
      $(this).prop('checked', checkedStatus) //.prop('disabled', false) 
      // } else { 
      // $(this).prop('checked', checkedStatus); 
      // $checkAll.prop('checked', false); 
      // $('.controlled').prop('disabled', true) 
      // } 

     }); 
     $selectedAll.on('click keydown', function(){ 
     $checkAll.prop('checked', false) 
     }); 
    }); 
}); 

$('.controlled').prop('disabled', true); 
$('.controller').click(function() { 
    var $this = $(this), 
     $inputs = $($this.data('target')); 
    $inputs.prop('disabled', !this.checked); 
    if (!this.checked) { 
     $inputs.prop('checked', false); 
    } 
}); 

JSFiddle

Answer 1

솔루션 :

var $check1 = $('input[id*=selectAll]'), 
     $check2 = $('tr th :checkbox'), 
     $checkAll = $check1.add($check2); 

    $checkAll.on('click keydown', function() { 
     var checkedStatus = this.checked, 
      $selected1 = $(this).closest(".formFieldWrapper").find('input:checkbox:not(:first):not([data-leader])'), 
      $selected2 = $(this).closest("table").find('tr td :checkbox'), 
      $selectedAll = $selected1.add($selected2); 

     $selectedAll.each(function() { 
      $(this).prop('checked', checkedStatus); 

      if (checkedStatus === true) { 
       $('.controlled').prop('disabled', false); 
      } else { 
       $('.controlled').prop('disabled', true); 
      } 

     }); 

     $selectedAll.on('click keydown', function() { 
      $checkAll.prop('checked', false) 
     }); 
    }); 


$('.controlled').prop('disabled', true); 
$('.controller').click(function() { 
    var $this = $(this), 
     $inputs = $($this.data('target')); 

    $inputs.prop('disabled', !this.checked); 
    if (!this.checked) { 
     $inputs.prop('checked', false); 
    } 
});