How do I execute a function only if checkboxes are unchecked?

I am working on a little dice game, where the user can lock specific die. But I can't get it to work with if else statements. How do I "roll" the dice only where the checkboxes are unchecked?

const btnRoll = document.querySelector('.btn_roll');

btnRoll.addEventListener('click', () => {
  roll();
});

function roll() {
  const dice1 = document.querySelector('.dice1');
  const dice2 = document.querySelector('.dice2');
  const dice3 = document.querySelector('.dice3');

  if (!document.getElementById('dice-1').checked) {
    randomOne = Math.floor(Math.random() * 6) + 1;
    dice1.src = `img/dice-${randomOne}.png`;
    console.log(!document.getElementById('dice-1').checked);
  } else if (!document.getElementById('dice-2').checked) {
    randomTwo = Math.floor(Math.random() * 6) + 1;
    dice2.src = `img/dice-${randomTwo}.png`;
  } else if (!document.getElementById('dice-3').checked) {
    randomThree = Math.floor(Math.random() * 6) + 1;
    dice3.src = `img/dice-${randomThree}.png`;
  } else {
    console.log('no checkboxes are selected');
  }
}

<form id="dices">
  <input type="checkbox" id="dice-1" name="dice-1" value="dice-1" />
  <img src="img/dice-5.png" alt="Dice" class="dice1" id="dice-1" />
  <input type="checkbox" id="dice-2" name="dice-2" value="dice-2" />
  <img src="img/dice-5.png" alt="Dice" class="dice2" id="dice-2" />
  <input type="checkbox" id="dice-3" name="dice-3" value="dice-3" />
  <img src="img/dice-5.png" alt="Dice" class="dice3" id="dice-3" />
  <input type="checkbox" id="dice-4" name="dice-4" value="dice-4" /> 5.png" alt="Dice" class="dice6" id="dice-6" />
</form>
<br />
<button class="btn_roll">roll</button>