I’m building a website using jQuery 3.7.1. It has 5 radio buttons and each radio button has a corresponding text input. I want each text input to be enabled only when its radio button is selected.

The enable states are correct on page load, and I add event handlers in jQuery’s document.ready to update the enable states when the radio button states change.

I happened to be on a slow internet connection today, and I noticed that I can click on the radio buttons before document.ready runs. This leaves my page in an inconsistent state.

What’s the right way to handle this? I could have things disabled on page load and enable them in document.ready, but I’d prefer to avoid that solution (the visual change from disabled to enabled as the page completes loading isn’t ideal). If I can disable the radio buttons without a visual change to their state then that would be acceptable, but it seems like a lot of complexity to handle this edge case (in reality the website I’m building is of course much more complicated than this).