JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container container-1">
<input type="radio" name="group-1" value="1" id="">
<input type="radio" name="group-1" value="2" id="">
<input type="radio" name="group-1" value="3" id="">
</div>
<div class="container container-2">
<input type="radio" name="group-2" value="4" id="">
<input type="radio" name="group-2" value="5" id="">
<input type="radio" name="group-2" value="6" id="">
</div>
<div class="container container-3">
<input type="radio" name="group-3" value="7" id="">
<input type="radio" name="group-3" value="8" id="">
<input type="radio" name="group-3" value="9" id="">
</div>
<button id="button" disabled>Click</button>
JavaScript
(function() {
const containers = [...document.querySelectorAll('.container')];
const applyButton = () => document.querySelector('#button').removeAttribute('disabled');
containers.forEach(element => {
element.addEventListener('input', function handler(event){
element.wasChecked = true;
if(containers.every((v) => v.wasChecked)) applyButton();
this.removeEventListener('input', handler);
});
})
})();