選擇所有，取決於複選框

Question

我有以下功能「選擇所有複選框」和「取決於複選框」，但它不工作，因爲我想要的。 1.如果我選擇「全部選擇」，「受控」複選框將保持禁用狀態 2.當使用「控制器」啓用「受控」複選框並且使用「全選」時，「受控」chaboxbox保持活動狀態。當他們沒有被選中時，我需要他們不活躍。

我試圖創建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); 
    } 
});