Question

I am having difficulty finding specifically what I’m searching for, most likely because I’m not sure how to express it well in a Google search.

Basically what I would like to do is display 30 or so buttons that users would then be able to select. Once selected a button changes color indicating that the particular option has been chosen. Users are required to select 10 out of 30 options. The results should then be aggregated (basically counting each unique button selected) and displayed to another user who can login and see the results.

Multiple users should be able to select these options and have their results recorded.

I’m not looking to create a drop down list, multi-list, or checkbox solution. In my research so far I have found plenty of references to this type of option. Also, Javascript restricting the min/max number of checkboxes a user can select.

I hope that makes sense. Any assistance with identifying the best method for going about this task would be greatly appreciated.

Thank You,

-Nathan

Answer 1

What you can do, you can create 30 buttons, and connect each button to a hidden check box, then you can post it to server, eg.

<input type="checkbox" value="1" name="chk_one" id="chk_one" style="display: none;">
<input type="button" value="Check Box One" id="btn_one"/>

CSS

input[type="button"].selected { color: red; }
input[type="button"] { color: black; }

then you can write jQuery solution in order to make it change colors:

var _minLength = 10;
var _maxLength = 30;
    $(document).ready(function() {
        $('#submit_id').click(function() { 
           if($('#form_id input[type="checkbox"]').is(':checked').length < _minLength) 
            { 
              alert('you need to select at least ' + _minLength + ' of buttons'); return false; 
            };});
        $('#form_id input [type="button"]').click(function() {
            var _id = $(this).attr('id').toString().split('_')[1];
            if(_id != null)
            {
               var _chckBox = $('#chk_'+_id);
               var _newState =  _checkBox.attr('checked') ? false, true;
               if($('#form_id input[type="checkbox"]').is(':checked').length+1 > _maxLength)
                  return;


               _checkBox.attr('checked', _newState);
               if(_checkBox.attr('checked'))
                  $(this).addClass('selected');
               else
                  $(this).removeClass('selected');
             }
        });
    });

Method from above will attach click event to every button in the area you specified with “#form_id” then when clicked it will toogle state of hidden checkbox and will set or remove class from button, it depends of checkbox state.

And by the way number of checkboxes is not limited.