Select only one checkbox

Today I will detail a situation faced by one of my friend. I would call it a software design disaster, how? I will explain. He has to develop a page with two grids similar to below image. Capture

The functionality required was very unorthodox. In the grid (captioned Vertically), the user should be allowed to select only one Checkbox per year and in second grid (captioned Horizontally), the user should be allowed to select only one Checkbox per criteria/per row. Although both these situations could have been handled by using Radio Buttons, but he was adamant that he want it to be a Checkbox only, to which i suggested him to use radio button and by using CSS make it look like a Checkbox. But he wanted it to be a Checkbox only.

For him i wrote a JQuery function to get the desired results, which i am sharing.

$(document).ready(function () {
$(‘:checkbox’).on(‘change’,function(){
var th = $(this),
name = th.attr(‘name’);
if(th.is(‘:checked’)){
$(‘:checkbox[name=”‘ + name + ‘”]’).not(th).prop(‘checked’,false);
}
});
});

The above function is very simple and works on name attribute. On click of a Checkbox it UnSelect all Checkboxes with the same name except the current Checkbox.

jquery

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s