Как включить следующий флажок, если установлен верхний флажок

Question

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<lable>Checkbox 1</lable>
<input type="checkbox" class="fields" checked/>
<br>
<lable>Checkbox 2</lable>
<input type="checkbox" class="fields" checked/>
<br>
<lable>Checkbox 3</lable>
<input type="checkbox" class="fields" checked />
<br>
<lable>Checkbox 4</lable>
<input type="checkbox" class="fields" checked/>
<br>
<lable>Checkbox 5</lable>
<input type="checkbox" class="fields" checked/>


$('[type=checkbox]').click(function() {
  var $this = this;
  if ($(this).is(':checked'))
    return;
  var uncheck = false;
  $('[type=checkbox]').each(function() {
      if (this === $this){
        uncheck = true;
      }
    
      if (uncheck){
        this.checked = false;
        }
    });
});

После того, как любой верхний флажок будет снят, все нижеприведенные флажки будут сняты автоматически, но я хочу, чтобы при установке любого верхнего флажка, только следующий флажок должен быть включен, когда пользователь устанавливает этот флажок, должен быть включен другой флажок.

Answer 1

Согласно вашему последнему комментарию, вы можете добавить неограниченное количество флажков, если какой-либо флажок снят с середины, то в следующий раз все флажки будут отключены ..

$('.fields').on('click', function() {

    let nextChk = $(this).nextAll('.fields');
    
    // checked
    if( this.checked ){
        // find the next checkbox and disabled it 
        if( nextChk.first().length )
           nextChk.first().attr('disabled', false);
    }
    // unchecked
    else{
        // find all checkboxes, disable and check it
        nextChk.each(function(){
           $(this).attr('disabled', true);
           $(this).prop('checked', false);
        });
    }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label>Checkbox 1</label>
<input type="checkbox" class="fields" checked/>
<br>
<label>Checkbox 2</label>
<input type="checkbox" class="fields" checked/>
<br>
<label>Checkbox 3</label>
<input type="checkbox" class="fields" checked/>
<br>
<label>Checkbox 4</label>
<input type="checkbox" class="fields" checked/>
<br>
<label>Checkbox 5</label>
<input type="checkbox" class="fields" checked/>

Answer 2

Это выполняет по крайней мере часть работы (включение следующего флажка):

var cbs=$('[type=checkbox]').click(function(){
 let nxt=cbs.get(cbs.index(this)+1)
 if (nxt) nxt.disabled=false;
  
}).slice(1).prop('disabled',true).end();

input:checkbox {}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label>Checkbox 1
<input type="checkbox" class="fields"/></label>
<br>
<label>Checkbox 2
<input type="checkbox" class="fields"/></label>
<br>
<label>Checkbox 3
<input type="checkbox" class="fields"/></label>
<br>
<label>Checkbox 4
<input type="checkbox" class="fields"/></label>
<br>
<label>Checkbox 5
<input type="checkbox" class="fields"/></label>
</form>