Seleziona più il numero limite di selezione

Voglio che l’utente selezioni il massimo di solo tre opzioni da più opzioni di selezione. Ho provato questo codice finora:

 Bungee Jumping Camping Mountain Biking Rappelling Rock Climbing / Bouldering Skiing Wild Life (Safari) Canoeing & Kayaking Rafting Sailing Scuba Diving Snorkeling Surfing Hang Gliding Hot-air Ballooning Micro-light Aircrafts Paragliding Paramotoring Parasailing Skydiving / Parachuting Zip-line / Flying Fox Caving Cycling Fishing & Angling Motorbike trips Nature Walks Road Trips Zorbing Trekking Hiking and Mountaineering Backpacking Water  

Il codice javascript:

  $("select").change(function() { if ($("select option:selected").length > 3) { $(this).removeAttr("selected"); alert('You can select upto 3 options only'); } });  

Questo codice mostra la casella di avviso quando vengono selezionate più di 3 opzioni, ma consente comunque l’accesso per selezionare le opzioni 4, 5, 6 e così via con la casella di avviso visualizzata. Come convalidarlo?

Prova questo…

Controllare la lunghezza e deselezionare dopo aver raggiunto la selezione massima

   

DEMO: http://jsfiddle.net/9c3sevuv/

Stai usando this evento di change interno, che è il riferimento per select .

Prova questo:

 $("select").on('click', 'option', function() { if ($("select option:selected").length > 3) { $(this).removeAttr("selected"); // alert('You can select upto 3 options only'); } }); 

Demo: http://jsfiddle.net/tusharj/tmkzebnj/

MODIFICARE

 $("select").on('change', function(e) { if (Object.keys($(this).val()).length > 3) { $('option[value="' + $(this).val().toString().split(',')[3] + '"]').prop('selected', false); } }); 

Demo: http://jsfiddle.net/tusharj/tmkzebnj/1/

Prova questo Fiddle .

 $("select option").click(function() { if ($("select option:selected").length > 3) { $(this).removeAttr("selected"); alert('You can select upto 3 options only'); } }); 

È ansible disabilitare le opzioni non selezionate una volta che l’utente ha selezionato il limite massimo e ritriggersrle quando il conteggio totale delle selezioni scende al di sotto del limite massimo.

Ecco il codice di esempio,

  function maxAllowedMultiselect(obj, maxAllowedCount) { var selectedOptions = jQuery('#'+obj.id+" option[value!=\'\']:selected"); if (selectedOptions.length >= maxAllowedCount) { if (selectedOptions.length > maxAllowedCount) { selectedOptions.each(function(i) { if (i >= maxAllowedCount) { jQuery(this).prop("selected",false); } }); } jQuery('#'+obj.id+' option[value!=\'\']').not(':selected').prop("disabled",true); } else { jQuery('#'+obj.id+' option[value!=\'\']').prop("disabled",false); } } 
   

Prova questo

 $("select").change(function() { if($("select option:selected").length > 3) { alert('You can select upto 3 options only'); $(this).removeAttr("selected"); } }); 

DEMO