Limiting the number of selectable options

[GoogleCodeExporter]

It would be great if there was a built-in command that allows me to limit the 
number of selectable options, deactivating the rest once a certain number of 
them is checked.

Doing this on my own led to the following problem:

** What steps will reproduce the problem?
I tried to achieve this with jquery, using the length of the original select 
field (with jquerys val()-function) and disabling all remaining options both in 
the original select field and the dropdownchecklist once the length surpasses a 
certain value.

** What is the expected output? What do you see instead?
Ths works as long as the user takes his time clicking through the options. But 
in case he/she goes through some sort of frenzy and clicks on the different 
options too fast, it may occur that more than the specified number of options 
can be activated. Even if he clicks on a bunch of options that have been 
properly deactivated it happens that they are activated "retroactively". Or one 
ends up with the specified number of checked options, but some of them are 
deactivated. Other strange outcomes possible.
I suppose that my approach is too simple, but I don't have the time or the 
knowledge to get deeper into the code of ddcl in order to look for a more 
convenient solution.

** What is your environment?
-- DropDownCheckList version: Not quite sure - we use the drupal module "sexy 
exposed" due to some compatibility issues with drupal 6, which supposedly uses 
the last version that is compatible with jQuery 1.3.2
-- jQuery version: 1.3.2
-- jQuery UI version: 1.8.16
-- Browser and version: Firefox 8+, Chrome 15, IE9

** Please provide any additional information below/Please attach sample

The jquery-code I used:

$("#orig-select").change(function(){
  if ($(this).val().length > x) {
    $("#ddcl-container input:not(:checked)").attr('disabled', 'disabled');
    $("#orig-select option:not(:selected)").attr('disabled', 'disabled');
  }
  if ($(this).val().length <= x) {
    $("#ddcl-container input[disabled]").removeAttr('disabled');
    $("#orig-select input[disabled]").removeAttr('disabled');
  }
});   

Original issue reported on code.google.com by mail.at....@gmail.com on 3 Jan 2012 at 10:05

[GoogleCodeExporter]

Is there a way to change this post after publishing it? I did not find the 
options for type and priority - it obviously isn't a "defect" but a "feature 
request", if this type exists.

Original comment by mail.at....@gmail.com on 3 Jan 2012 at 10:12

[GoogleCodeExporter]

I am hesitant to try to incorporate any hard limits on the number of items 
selected, since everyone has a different opinion on how to determine when you 
hit the limit, and what to do when the limit is hit.

I am not quite sure how your code fragment wires into DDCL.  I would have 
expected you to be using the onchange callback function.

Original comment by womohun...@ittrium.com on 9 Jan 2012 at 9:10

• Added labels: Type-Enhancement
• Removed labels: Type-Defect

[GoogleCodeExporter]

I'm not asking for a hardcoded limit. I personally would apreciate a function 
that might be called "LimitOutput" or so, since I need it for a project.

My code turned out to be rather useless since it doesn't consider the order in 
which the javascript-functions are called. I'm not at all an expert for jquery 
or javascript, so you're most probably right whith what you suggested in your 
last sentence - anyhow, that's beyond my knowlege. The intention of posting my 
rudimentary code was to open a discussion. If no one else feels like this could 
be a useful feature, that's fine, too. =)

Original comment by mail.at....@gmail.com on 10 Jan 2012 at 8:37

[GoogleCodeExporter]

But I see what you mean with "everyone has a different opinion on how to 
determine when you hit the limit, and what to do when the limit is hit". Maybe 
I didn't think this through. But would you happen to know a more convenient way 
to achieve what I was aiming for?

Original comment by mail.at....@gmail.com on 10 Jan 2012 at 8:40

[GoogleCodeExporter]

The Demo page has an example of a callback that limits the number of values 
that can be checked.  I personally prefer the idea of an alert when I attempt 
to click on a 4th item when the limit is 3.  Then the system can tell me why I 
can no longer click.  If the other options just went disabled after picking 3, 
as a user, I would be scratching my head as to why the control changed.
From the sample:

onItemClick: function(checkbox, selector){
  var justChecked = checkbox.prop("checked");
  var checkCount = (justChecked) ? 1 : -1;
  for( i = 0; i < selector.options.length; i++ ){
    if ( selector.options[i].selected ) checkCount += 1;
  }
  if ( checkCount > 3 ) {
    alert( "Limit is 3" );
    throw "too many";
  }
}

Original comment by womohun...@ittrium.com on 10 Jan 2012 at 3:12

[GoogleCodeExporter]

Erm... jap, that's pretty much what I was looking for... Now I feel stupid =)
The problem is that I have to use an earlier version of DDCL (smth. btw. 0.8 
and 1.0), where this function doesn't exist. Anyhow, thanks for your help, I'll 
try to update it somehow. Never mind me not reading the instructions properly =)

Original comment by mail.at....@gmail.com on 10 Jan 2012 at 4:57

[GoogleCodeExporter]

I have decided to rely on the onItemClick callback function to implement any 
limits on what can be selected.

Original comment by womohun...@ittrium.com on 23 Jan 2012 at 3:30

• Changed state: WontFix