问题在于复选框，如果我激活它们（选中），树也会关闭。但我希望它保持打开状态，直到我选择了所有复选框。因此，当您单击复选框时，它会关闭。
$( 'input[type="checkbox"]' ).change( function ( e )
{
var checked = $( this ).prop( "checked" ),
container = $( this ).parent(),
siblings = container.siblings();
container.find( 'input[type="checkbox"]' ).prop( {
indeterminate: false,
checked: checked
} );
function checkSiblings( el )
{
var parent = el.parent().parent(),
all = true;
el.siblings().each( function ()
{
return all = ( $( this ).children( 'input[type="checkbox"]' ).prop( "checked" ) === checked );
} );
if ( all && checked )
{
parent.children( 'input[type="checkbox"]' ).prop( {
indeterminate: false,
checked: checked
} );
checkSiblings( parent );
} else if ( all && !checked )
{
parent.children( 'input[type="checkbox"]' ).prop( "checked", checked );
parent.children( 'input[type="checkbox"]' ).prop( "indeterminate", ( parent.find( 'input[type="checkbox"]:checked' ).lenght > 0 ) );
checkSiblings( parent );
} else
{
el.parents( "li" ).children( 'input[type="checkbox"]' ).prop( {
indeterminate: true,
checked: false
} );
}
}
checkSiblings( container );
} );
$( document ).ready( function ()
{
$( "#tree .open" ).click( function ( e )
{
e.stopPropagation();
$( this ).toggleClass( "open closed" );
} );
} );#tree {
width: auto;
height: 350px;
line-height: 20px;
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
overflow: scroll;
overflow-x: hidden;
}
#tree .open > ul {
display: none;
}
#tree .open, #tree .closed {
cursor: pointer;
}
#tree .open::before {
content: "\002B";
font-size: 25px;
display: inline-block;
margin-left: 2px;
width: 20px;
}
#tree .closed::before {
content: "\2212";
font-size: 25px;
display: inline-block;
margin-left: 2px;
width: 20px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link href="style.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>checkboxTree</title>
</head>
<body>
<!--CheckboxTree-->
<div class="col">
<ul id="tree" style="list-style-type: none;">
<li class="open">
<input type="checkbox" name="tall" id="tall">
<label for="tall">Item 1</label>
<ul style="list-style-type: none;">
<li>
<input type="checkbox" name="tall-1" id="tall-1">
<label for="tall-1">Item 1.1</label>
</li>
<li class="open">
<input type="checkbox" name="tall-2" id="tall-2">
<label for="tall-2">Item 1.1.1</label>
<ul style="list-style-type: none;">
<li>
<input type="checkbox" name="tall-2-1" id="tall-2-1">
<label for="tall-2-1">Item 1.1.2</label>
</li>
<li>
<input type="checkbox" name="tall-2-2" id="tall-2-2">
<label for="tall-2-2">Item 1.1.3</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" name="tall-3" id="tall-3">
<label for="tall-3">Item 1.2</label>
</li>
</ul>
</li>
<li class="open">
<input type="checkbox" name="short" id="short">
<label for="short">Item 2</label>
<ul style="list-style-type: none;">
<li>
<input type="checkbox" name="short-1" id="short-1 " checked>
<label for="short-1">Item 2.1</label>
</li>
<li>
<input type="checkbox" name="short-2" id="short-2" disabled>
<label for="short-2">Item 2.2</label>
</li>
<li>
<input type="checkbox" name="short-3" id="short-3" checked disabled>
<label for="short-3">Item 2.3</label>
</li>
<li>
<input type="checkbox" name="short-3" id="short-3">
<label for="short-3">Item 2.3</label>
</li>
<li>
<input type="checkbox" name="short-3" id="short-3">
<label for="short-3">Item 2.4</label>
</li>
<li>
<input type="checkbox" name="short-3" id="short-3">
<label for="short-3">Item 2.5</label>
</li>
</ul>
</li>
</ul>
</div>
<!--CheckboxTree end-->
</body>
</html>我无法激活复选框。当您单击复选框时，树将关闭。例如，当单击 Item 1.1.3 或 Item 1.2 或 Item 1.1 树时关闭。树必须保持打开状态，当我单击加号或减号时，它应该关闭。