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