21150

JS logic - adding 2 multiselect checkboxes

Question:

Just need help with a little JS logic as I'm pretty new to it. I have 2 seperate multiselect dropdown checkbox list user can select from. As of now they can choose no more than 5 from each. How could I set it up where it adds boths drop downs to only allow 5 TOTAL for both.

<select id="dropdown1" multiple="multiple" class="multiselect"> <select id="dropdown2" multiple="multiple" class="multiselect">

js

$(document).ready(function() { $(".multiselect").multiselect({ header: "Choose up to 5 areas", click: function(event,ui){ if( $(this).multiselect("widget").find("input:checked").length > 5 ){ return false; }}, selectedList:5 });

I'm assuming I would use the id's instead of just the ".multiselect" class then add them. Something like #dropdown1+#dropdown2 > 5 in the if statement. I just simply don't know proper syntax to go about it someone could help me out.

If your not familiar with the jQuery widget I'm using:<a href="http://www.erichynds.com/blog/jquery-ui-multiselect-widget" rel="nofollow">http://www.erichynds.com/blog/jquery-ui-multiselect-widget</a>

per request user689

$(document).ready(function() { $(".multiselect").multiselect({ header: "Choose up to 5 areas", click: function(event,ui){ if($(".multiselect").multiselect("getChecked").map(function(){ return this.value; }).size() > 5){ return false;}}, selectedList:5 });

Answer1:

You can do this.

You will show a message and also unselect the item when the number is more than 5.

<strong>Javascript using Jquery</strong>

$(".multiselect option").click(function(){ if($(".multiselect").children(":checked").length > 5){ if($(this).is(":checked")){ $(this).removeAttr("selected"); alert("You can select only 5 items"); } } } );

Answer2:

The syntax for using a method is:

$("#multiselect").multiselect("method_name");

As an example, to get an array of all clicked checkboxes:

var array_of_checked_values = $(".multiselect").multiselect("getChecked").map(function(){ return this.value; }).get();

In your case, you just want to get the number of checked boxes, i.e the length of the array:

if($(".multiselect").multiselect("getChecked").map(function(){ return this.value; }).size() > 5){ return false;}

The method you are using will access each checkbox on its own, and that would complicate things.

Recommend

  • dynamic variable on setState won't work for toggle
  • Change sheet source dynamically
  • How to disable a single option in a dijit.form.Select?
  • How can I use a treetable to show all rows in an Oracle SQL table?
  • Calculate distance between 2 lon lats but avoid going through a coastline in R
  • Fixing a slow GridView
  • Apple review objection Invalid directory name for Plugins folder (Child Browser Cordova)
  • Making Google Visualization - Annotation Chart to work in GWT
  • Cannot get text from text area
  • Getting error 'Cannot read property 'document' of undefined' while importing exp
  • SyntaxError: (irb):26: both block arg and actual block given
  • How can I restyle a word when rendering a pdf with pdf.js?
  • Uncaught TypeError: $(…).select2 is not a function
  • How do I display a dialog that asks the user multi-choice questıon using tkInter?
  • Remove changes from one element when event occurs on another element?
  • saving file generated by TCPDF
  • How to view images from protected folder with php?
  • Button click event not firing in jQuery
  • Chart.js Multiple dataset
  • Textfile Structure (tables)
  • How do I get HTML corresponding to current DOM tree?
  • chrome.tabs.executeScript only fires when the Developer Console is open
  • JQuery Internet Explorer and ajaxstop
  • JSON response opens as a file, but I can't access it with JavaScript
  • Scrapy recursive link crawler
  • How to rebase a series of branches?
  • Why ng-show works with ng-repeat but ng-if doesn't? [duplicate]
  • vba code to select only visible cells in specific column except heading
  • Change an a tag attribute in JavaScript based on screen width
  • Importing jscolor library in angular 2
  • jquery mobile loadPage not working
  • jqPlot EnhancedLegendRenderer plugin does not toggle series for Pie charts
  • Data Validation Drop Down Box Arrow Disappearing
  • How do you join a server to an Active Directory (domain)?
  • Binding checkboxes to object values in AngularJs
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?
  • Net Present Value in Excel for Grouped Recurring CF
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize
  • How to load view controller without button in storyboard?