Enable or disable an input text field by changing the option of a radio input field

This practice requires a couple of steps:

  • Define a click event for the radio input “Yes”. When the click occurs, the input text will be enabled.
  • Define a click event for the input radio “No”. When the click occurs, it will proceed to disable the

The Input text at first I suppose will appear enabled.

The HTML does not indicate it and it would have been fine. But it could be something like this:

Interested in receiving email?

Yes No

Now, the part of the Javascript to enable or disable the input, depending on whether you click on the “Yes” or “No” radio.

// We access the button var emailInput = document.getElementById(’emailInput’); // event for input radius of “if” document.getElementById(‘InterestedPositive’).addEventListener(‘click’, function(e) { console.log(‘Let’s enable input text’); emailInput.disabled = false ; }); // event for input radius of “no” document.getElementById(‘NegativeInterested’).addEventListener(‘click’, function(e) { console.log(‘Let’s disable input text’); emailInput.disabled = true ; });

I hope it has been clear to you.

See also  Animated menu with CSS 3
Loading Facebook Comments ...
Loading Disqus Comments ...