Tuesday, March 5, 2013

JavaScript: enable or disable radio buttons



Sometimes in HTML form, when users answer yes, they can continue for more selections. If they answer no, the next selection is disabled. In the following example, if you select yes under competency,   you can continue to select hard skill or soft skill. If you select no, the hard skill and soft skill selections are disabled.
Example code:
 <script type="text/javascript">
    function disablecheckbox()
{
document.getElementById('skill').disabled=true;
document.getElementById('skill2').disabled=true;
document.getElementById('skill').checked=false;
document.getElementById('skill2').checked=false;
}
function enablecheckbox()
{
document.getElementById('skill').disabled=false;
document.getElementById('skill2').disabled=false;
}
</script>
Competency<br />
 <input type="radio"  name="c1" onfocus="enablecheckbox();"   />
  Yes
 
   <input type="radio" name="c1"  onfocus="disablecheckbox();"/>
   No<br />
   If yes:
   <input type="radio" id="skill" name="s1"  disabled="disabled"    />
   hard skill
 
   <input type="radio" id="skill2" name="s1"  disabled="disabled" />
   soft skill<br />


Demo: when you click no, hard skill and soft skill selections are disabled.
Competency
Yes No
If yes: hard skill soft skill

No comments:

Post a Comment