Using jQuery to disable/enable and check/uncheck Radio Buttons on Date selected



Motivated by this question on StackOverflow - Disable radio button depending on date, I decided to help and here I’m with another code snippet post.

This time I show you how to use jQuery UI and its Datepicker control to control a set of radio buttons (only 2 in this post to make things easier) that have their state (enabled/disabled) changed depending on the date selected by the user.

Here’s the code:


<!DOCTYPE html>
<html>
<head>

   
<meta charset="UTF-8" />
    
   
<title>jQuery UI - Datepicker & Radio Buttons</title>

   
<!-- Linking to jQuery stylesheets and libraries -->
   
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/base/jquery-ui.css" type="text/css" media="all" />

   
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
   
   
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>

   
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js" type="text/javascript"></script>
   
   
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>

   
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>

</head>

<body>

   
<script>

   
$(function()
    {
       
$("#datepicker").datepicker
        ({          
           
// Event raised everytime a date is selected in the datepicker
            onSelect: function(date)
            {
               
// Self explanatory :) - used to get today's date
                var today = new Date();

               
// Business logic to change radio buttons' state                 if($("#datepicker").datepicker("getDate") > today)
                {
                   
$("#radioButton1").attr('disabled', true);
                   
$("#radioButton2").attr('disabled', false); 
                }
               
else
                {
                   
$("#radioButton1").attr('disabled', false);
                   
$("#radioButton2").attr('disabled', true); 
                }
            }
        });

       
// Just setting the default localization for the datepicker
        $.datepicker.setDefaults($.datepicker.regional['']); 
    });
    
   
</script>

   
<p>Date: <input id="datepicker" type="text"></p>

   
<input id="radioButton1" type="radio" value="myValue1" name="radioButton1"/>Radio button 1<br/>
   
<input id="radioButton2" type="radio" value="myValue2" name="radioButton2"/>Radio button 2

</body>

</html>

If you wanted to control the state (checked/unchecked) you’d have to make a small change in the code as follows:


// Business logic to change radio buttons' state                 if($("#datepicker").datepicker("getDate") > today)

   
$("#radioButton1").attr('checked', true); 
   
$("#radioButton2").attr('checked', false);  

else 

   
$("#radioButton1").attr('checked', false); 
   
$("#radioButton2").attr('checked', true);  
}

When you open the page for the first time you get this screen:

Page when viewed for the first time (both radio buttons are enabled)
Figure 1 - Page when viewed for the first time (both radio buttons are enabled)

If you pick a date that is greater than today’s date, Radio button 1 is disabled (turns to gray) and Radio button 2 is enabled according to the logic implemented.

Radio button 1 is disabled (turns to gray) and Radio button 2 is enabled
Figure 2 - Radio button 1 is disabled (turns to gray) and Radio button 2 is enabled

Otherwise, Radio button 2 is disabled and Radio button 1 is enabled:

Radio button 2 is disabled and Radio button 1 is enabled
Figure 3 - Radio button 2 is disabled and Radio button 1 is enabled

Hope you make good use of it.