We use the or operator for alternative conditions, like enabling the Apply button if at least one condition is met.

<html>
<head>
<style>
body {
text-align: center;
font-size : 18px;
margin: 0 auto;
height: 400px;
background-color: #f9fafe;
}

button {
width: 210px;
height: 30px;
font-size : 20px;
border-radius: 5px;
margin:0 auto;
display:block;
color: white;
outline: none;
}

.disabled {
background-color: #d2d3da;
}

.enabled {
background-color: #6d3acf;
}

#inputDiv {
padding: 20px;
border-radius: 10px;
margin: auto;
width: auto;
text-align: left;
display: table;
background-color: white;
}

.disabledDiv {
border: 1px solid #d2d3da;
}

.enabledDiv {
border: 1px solid #6d3acf;
}

#outherDiv {
margin: auto;
width: auto;
padding: 0px 10px 10px 12px;
}
</style>
</head>
<body>
<h2>Student Scholarships</h2>
<div id="outherDiv">
<div id="inputDiv" class="disabledDiv">
<input type="checkbox" id="gradeCheckbox">
<label for="gradeCheckbox"> Average grade: A</label><br>
<input type="checkbox" id="scoreCheckbox">
<label for="scoreCheckbox"> Final score: >= 1300</label><br>
</div>
</div>
<button id="applyBtn" class="disabled">Apply</button>
<script>

let applyBtn = document.getElementById("applyBtn");
let inputDiv = document.getElementById("inputDiv");
applyBtn.className = "disabled";
inputDiv.className = "disabledDiv";

let gradeCheck = document.getElementById("gradeCheckbox");
gradeCheck.addEventListener('click', function() {
enableIfChecked();
});

document.getElementById("scoreCheckbox").addEventListener('click', function() {
enableIfChecked();
});


function enableIfChecked() {
if ( gradeCheck.checked || document.getElementById("scoreCheckbox").checked) {
applyBtn.className = "enabled";
inputDiv.className = "enabledDiv";
} else {
   applyBtn.className = "disabled";
inputDiv.className = "disabledDiv";
}
}

</script>
</body>
</html>]]>