I am using multiselect for different subject's I want to limit the select up to 2 and make the other's disabled in the same way if user deselect, Again the option must be available for the user.
<select multiple="multiple" class="subjects" name="subjects[]" style="float:left;width:205px;" size="5">
<option value='1'>subject1</option>
<option value='2'>subject2</option>
<option value='3'>subject3</option>
<option value='3'>subject3</option>
</select>
So far I have achieved to deselect only the last option which was selected after 2 and the code is as follow
/**
* Make sure the subject's limit is 2
*/
$(".subjects option").click(function(e){
if ($(this).parent().val().length > 2) {
$(this).removeAttr("selected");
}
});
Thank you.
I am using multiselect for different subject's I want to limit the select up to 2 and make the other's disabled in the same way if user deselect, Again the option must be available for the user.
<select multiple="multiple" class="subjects" name="subjects[]" style="float:left;width:205px;" size="5">
<option value='1'>subject1</option>
<option value='2'>subject2</option>
<option value='3'>subject3</option>
<option value='3'>subject3</option>
</select>
So far I have achieved to deselect only the last option which was selected after 2 and the code is as follow
/**
* Make sure the subject's limit is 2
*/
$(".subjects option").click(function(e){
if ($(this).parent().val().length > 2) {
$(this).removeAttr("selected");
}
});
Thank you.
Share Improve this question edited Aug 8, 2012 at 10:54 Prathamesh mhatre asked Aug 8, 2012 at 10:41 Prathamesh mhatrePrathamesh mhatre 1,0855 gold badges17 silver badges32 bronze badges 4- 2 here is the answer stackoverflow./questions/2046205/… – CyberDem0n Commented Aug 8, 2012 at 10:46
- Thank's for the reply but I want to make all the remaining options disabled and in the link you provided it's only making the last option deselect. – Prathamesh mhatre Commented Aug 8, 2012 at 10:52
- Here is an example using pure javascript (stackoverflow./questions/4135210/html-multiselect-limit) – Mark Walters Commented Aug 8, 2012 at 10:52
- 1 I suspect you can't selectively disable option elements in a way that will work in all browsers. – nnnnnn Commented Aug 8, 2012 at 11:02
4 Answers
Reset to default 6Improved jQuery example, notice the (else enable) option, this fixes a bug on previous examples that disabled the select options permanently. Also removed the "Please select only two options." error message when possible. http://jsfiddle/c9CkG/25/
jQuery(document).ready(function () {
jQuery("select").on("change", function(){
var msg = $("#msg");
var count = 0;
for (var i = 0; i < this.options.length; i++)
{
var option = this.options[i];
option.selected ? count++ : null;
if (count > 2)
{
option.selected = false;
option.disabled = true;
msg.html("Please select only two options.");
}else{
option.disabled = false;
msg.html("");
}
}
});
});
As an improvment on RobG's answer, you could unselect an option if it makes count > 2.
See: http://jsfiddle/c9CkG/3/ for a working example using jQuery.
function checkSelected(el) {
var msgEl = document.getElementById('msg');
var count = 0;
for (var i=0, iLen=el.options.length; i<iLen; i++)
el.options[i].selected? count++ : null;
// Deselect the option.
if (count > 2) {
el.options[i].selected = false;
el.options[i].disabled = true;
msgEl.innerHTML = 'Please select only two options';
}
}
Something like the following will do the job:
function checkSelected(el) {
var msgEl = document.getElementById('msg');
var count = 0;
for (var i=0, iLen=el.options.length; i<iLen; i++)
el.options[i].selected? count++ : null;
msgEl.innerHTML = count > 2? 'Please select only two options' : '';
}
</script>
<span>Please select a maximum of two options:</span>
<select multiple onchange="checkSelected(this);">
<option>0
<option>1
<option>2
<option>3
</select>
<br>
<span id="msg"></span>
I don't think it's a good idea to disable options, you only care that only two are selected when the form is submitted. Until then, it doesn't matter.
$(document).ready(function() {
var last_valid_selection = null;
$('#testbox').change(function(event) {
if ($(this).val().length > 5) {
alert('You can only choose 5!');
$(this).val(last_valid_selection);
} else {
last_valid_selection = $(this).val();
}
});
});