<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;
}
});
});
一旦任何顶部复选框被取消选中，所有下面的复选框将自动取消选中，但我希望当任何顶部复选框被选中时，只应启用下一个复选框，当用户选中该框时，应启用另一个复选框。
根据您上次的评论，您可以添加无限制的复选框，如果从中间开始的任何复选框未选中，那么下一个所有复选框都将被禁用。
null
$('.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/>
这至少完成部分作业（启用下一个复选框）:
null
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>