katefarine,
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
form{
width: 200px;
height: 100px;
border: 1px solid red;
}
div{
display: inline-block;
width: 50px;
height: 50px;
border: 1px solid green;
}
.active{
background-color: #8B4513;
}
</style>
</head>
<body>
<form action="">
<div>1</div>
<div>2</div>
<div>3</div>
<button disabled>кнопка</button>
</form>
<script>
document.querySelector('form').addEventListener("click", function(e){
var target = e.target;
if (target.closest("div")) target.classList.toggle("active");
else document.querySelectorAll('div').forEach(el=> el.classList.remove("active"));
document.querySelector('button').disabled = !document.querySelectorAll('div.active').length;
});
</script>
</body>
</html>