Problem z opisaniem zachowania buttonów ankiety

Cześć :) Na wstępie zaznaczę że przygodę z JS dopiero zaczynam ;) z dostałam do wykonania zadanie które jestem w stanie logicznie ogarnąć ale nie wiem jak je zapisać- może pomożecie?
Mam ankietę z 3 pytaniami dla której robię front. Chciałabym żeby po kliknięciu buttonu (img) jego opacity zmieniła się z 0.5 na 1 i tyle ;) Bez możliwości zmiany później opcji itd... Kod html wygląda tak (wklejam kawałek):

 <div class="oceny">
<button type="radio" name="button" class="btn" value="0" id="button"><img src="1.png" class="button"/></button>
<button type="radio" name="button" class="btn" value="1" id="button"><img src="2.png" class="button"/></button>
 <button type="radio" name="button" class="btn" value="2" id="button" ><img src="3.png" class="button"/></button>
 </div>

napisałam coś takiego jak niżej (i milion innych opcji), ale oczywiście nie działa ;)

Document.querySelector('.btn').addEventListener('change', (event) => event.currentTarget.querySelectorAll('radio').forEach((element) => { element.disabled = True})).

Ma ktoś z Was pomysł jak to mogę rozwiązać? Sprawa jest banalna, brakuje jedynie wiedzy ;) W CSS to nie działa bo :focus działa dla jednego elementu na stronie, a chodzi mi o takie działanie (tylko żeby po zaznaczeniu elementu potem już nie dało się zaznaczyć nic innego).

A nie lepiej dać, że jak wybrano radioButtona to zmieniasz go na disable ... ?
coś takiego:

input[type=radio]").attr('disabled', true);

id="button"' - ID-y elementów nie powinny się powtarzać,
addEventListener('change' - raczej 'click', bo nie zmieniasz przecież wartości buttona,
element.disabled = True -
Jak chcesz zmieniać opacity, to zmieniaj też opacity: element.style.opacity = "0.5"
chyba, że sobie wcześniej zdefiniujesz w CSS
button:disabled {opacity:0.5;}

Document.querySelector('.btn').addEventListener('click', (event) => event.currentTarget.querySelectorAll('radio').forEach((element) => { element.style.opacity = "1"}));

ten kawałek powinien być ok? nic nie reaguje... :(
opacity się nie zmienia (w css jest 0.5)

button[disabled] {
  color:green;
  opacity:0.5;
}
button[disabled]::-moz-focus-inner {
  border:none;
  outline:none;
}

<div class="oceny">
  <button name="oceny" class="btn">1</button>
  <button name="oceny" class="btn">2</button>
  <button name="oceny" class="btn">3</button>
</div>

<div class="cos">
  <button name="cos" class="btn">1</button>
  <button name="cos" class="btn">2</button>
  <button name="cos" class="btn">3</button>
</div>

document.querySelectorAll('.btn').forEach((button) => {
  button.addEventListener('click', (event) => {
    document.querySelectorAll('button[name='+event.currentTarget.name+']').forEach((element) => {
      element.disabled = true;
    })
  });
});

Ale forEach nie we wszystkich przeglądarkach działa na kolekcjach elementów, bo wychodzi, że kolekcja to coś trochę innego niż tablica:
https://medium.com/@jsdevray/5-ways-to-loop-over-dom-elements-from-queryselectorall-in-javascript-55bd66ca4128