Empêcher la modification des champs radio ayant l’attribut readonly avec Javascript

Contexte

Dans le cadre du développement d’un plugin WordPress, j’ai réalisé une interface de configuration dans le dashboard. J’ai besoin de bloquer la modification de certains champs de façon conditionnelle et en fonction de certains autres champs. Or, l’attribut readonly ne permet pas de bloquer l’accès aux champs de type radio. Il faut procéder avec un petit bout de code Javascript.

Snippet

document.addEventListener('DOMContentLoaded', function () {
    const radioInputs = document.querySelectorAll('input[type="radio"]');
    // Ajouter un gestionnaire d'événements à chaque champ radio
    radioInputs.forEach(function (radioInput) {
        // Vérifier si l'attribut readonly est présent
        if (radioInput.hasAttribute('readonly')) {
            // Empêcher le clic sur le champ radio
            radioInput.addEventListener('click', function (event) {
                event.preventDefault();
            });
        }
    });
});