Showing posts with label code snippet. Show all posts
Showing posts with label code snippet. Show all posts

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

Posted by on 12/21/2010 12:22:00 PM

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.


Labels: , , , , , , , ,

Counting Value Frequency with LINQ (code snippet)

Posted by on 9/09/2010 12:26:00 AM

This post is a code snippet: a short code example to demonstrate a topic.

From now on I’ll write in this blog useful code snippets that I come to write.

A question on StackOverflow motivated me to write a simple C# console application that demonstrates a way of counting how often a value appears within a given set. I used LINQ to accomplish this.

I’ve commented the code in green so that it’s easier to understand what’s going on.

using System;
using System.Collections.Generic;
using System.Linq;

class Program
{
    static void Main(string[] args)
    {
        // Creating a list of Values that serves as the data source for LINQ query.
        List<int> values = new List<int>()
        {
            0, 1, 2, 3, 6, 2, 3, 1, 0, 4, 5, 7, 8, 9, 3, 7, 5
        };

        // For each Value in the data source, let's group by Value into g. g stores all Values grouped.
        // Using the select new constructor we create an Anonymous Type that has each distinct Value and its Count (how often it appears).
        var query = from v in values
                    group v by v into g
                    select new { Value = g.Key, Count = g.Count() };

        // A simple foreach that prints in the screen each Value and its frequency.
        foreach (var v in query)
        {
            Console.WriteLine("Value = {0}, Count = {1}", v.Value, v.Count);
        }
    }
}

This is the output:

Value = 0, Count = 2
Value = 1, Count = 2
Value = 2, Count = 2
Value = 3, Count = 3
Value = 6, Count = 1
Value = 4, Count = 1
Value = 5, Count = 2
Value = 7, Count = 2
Value = 8, Count = 1
Value = 9, Count = 1

Hope you enjoy and make good use of this code.

Feel free to comment and add any other way of doing this in a more efficient or elegant fashion.


Labels: , , , ,