Problema con disabled

[AyeyeBrazorv]

Ho fatto questa funzione javascript che data una select multipla mi fa disabilitare tutto se ho inserito troppe scelte. Ecco la funzione:

function conta() {

        var x=document.getElementById("prova");

        var i;

        var NumeroSelezionate = 0;

        for (i=0;i<x.length;i++){

            if (x.options[i].selected){

                  NumeroSelezionate++;

                  if (NumeroSelezionate > 4){

                   x.disabled=true;
                  }

              }

        }

    } 

Il problema è che se metto un alert al posto del disabled mi appare il messaggio al momento giusto ma non mi blocca la selezione (e mi riappare l'alert ma comunque mi fa selezionare quello dopo!). Se invece metto il disabled, mi disabilita la selezione, tuttavia la funzione prende 0 valori inseriti anzichè 5.
esempio: io devo inserire 5 città su una scelta di 10 possibili.

Nel primo caso quando ho inserito la quinta mi appare l'alert che mi avverte che ho inserito 5 città, se do invio mi stampa le 5 città correttamente. Nel secondo caso dopo che ho inserito la quinta mi disabilita tutto (quindi di sicuro non posso cliccare altre città) però non mi stampa città.
Come risolvo?

[cavicchiandrea]

Gli id devono essere univoci, non puoi avere 10 id prova

function conta() {
        var x=document.getElementsByTagName("input");
        var i;
        for (i=0;i<x.length;i++){
            if (x[i].type=='checkbox' && x[i].selected && i>4){
                   x[i].disabled=true;
                  }else{
x[i].disabled=false;
}
        }

    }

e modifica id delle checkbox in modo che diventino univoci

[lucavizzi]

Originariamente inviato da cavicchiandrea
Gli id devono essere univoci, non puoi avere 10 id prova

function conta() {
        var x=document.getElementsByTagName("input");
        var i;
        for (i=0;i<x.length;i++){
            if (x[i].type=='checkbox' && x[i].selected && i>4){
                   x[i].disabled=true;
                  }else{
x[i].disabled=false;
}
        }

    }

e modifica id delle checkbox in modo che diventino univoci

ma non si parla di una select multipla?

<select multiple="multiple" size="2">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

[AyeyeBrazorv]

Originariamente inviato da lucavizzi
ma non si parla di una select multipla?

<select multiple="multiple" size="2">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>

Si infatti è una select non una check box

[lucavizzi]

Non è semplicissimo, perchè non si può "bloccare" l'evento (che scatta immediatamente al click sulla option) con un return false.
E non si può nemmeno scorrere le option per deselezionare quelle oltre un certo numero di selezioni, verrebbe deselezionata quella con index maggiore, non l'ultima effettivamente selezionata.
Questa è la mia soluzione:

<script language="javascript" type="text/javascript">
function conta(selOpt) {
	var x=document.getElementById("prova");
	var i;
	var NumeroSelezionate = 0;
	for (i=0;i<x.length;i++){
		if (x.options[i].selected){
			NumeroSelezionate++;
		}
	}
	if (NumeroSelezionate > 2){
		x.options[selOpt].selected=false;
	}
}

window.onload=function(){
	var arr_opt=document.getElementById('prova').getElementsByTagName('option');
	for(var i=0; i<arr_opt.length; i++){
		arr_opt[i].onclick=function(){
			conta(this.index);
		}
	}
	
	
}
</script>


<select multiple="multiple" size="4" id="prova">
	<option value="volvo">Volvo</option>
	<option value="saab">Saab</option>
	<option value="mercedes">Mercedes</option>
	<option value="audi">Audi</option>
</select>

[AyeyeBrazorv]

Originariamente inviato da lucavizzi
Non è semplicissimo, perchè non si può "bloccare" l'evento (che scatta immediatamente al click sulla option) con un return false.
E non si può nemmeno scorrere le option per deselezionare quelle oltre un certo numero di selezioni, verrebbe deselezionata quella con index maggiore, non l'ultima effettivamente selezionata.
Questa è la mia soluzione:

<script language="javascript" type="text/javascript">
function conta(selOpt) {
	var x=document.getElementById("prova");
	var i;
	var NumeroSelezionate = 0;
	for (i=0;i<x.length;i++){
		if (x.options[i].selected){
			NumeroSelezionate++;
		}
	}
	if (NumeroSelezionate > 2){
		x.options[selOpt].selected=false;
	}
}

window.onload=function(){
	var arr_opt=document.getElementById('prova').getElementsByTagName('option');
	for(var i=0; i<arr_opt.length; i++){
		arr_opt[i].onclick=function(){
			conta(this.index);
		}
	}
	
	
}
</script>


<select multiple="multiple" size="4" id="prova">
	<option value="volvo">Volvo</option>
	<option value="saab">Saab</option>
	<option value="mercedes">Mercedes</option>
	<option value="audi">Audi</option>
</select>

SelOpt che sarebbe?

[lucavizzi]

Errata corrige:
A quanto pare, non è possibile assegnare un evento onclick al tag option su Internet Explorer.
quindi lo script diventa:

<script language="javascript" type="text/javascript">
var maxSel=4; //numero massimo di opzioni selezionabili 
var prevSel="";
var actSel="";
function checkSel(mSel){
	prevSel=actSel;
	actSel="";
	var NumSel=0;
	for (var i=0;i<mSel.length; i++){
		if(mSel.options[i].selected){
			NumSel++;
			actSel+=mSel.options[i].index+"|";
		}
	}
	if (NumSel>maxSel){
		var arr_prev=prevSel.split("|");
		var lastIndex=actSel;
		for(var j=0; j<arr_prev.length; j++){
			lastIndex=lastIndex.replace(arr_prev[j]+"|","");
		}
		mSel.options[lastIndex].selected=false;
		actSel=prevSel;
	}
}
</script>

lo si può associare ad una select multipla in questa maniera:
<select multiple="multiple" size="4" onchange="checkSel(this)">
...
</select>

[cavicchiandrea]

Secondo me non è fattibile, anche l'ultima versione funziona solo parzialmente, se selezioni le option una alla volta va bene, se fai una selezione multipla di option (tipo cinque) in un solo colpo non funziona più.

[lucavizzi]

Originariamente inviato da cavicchiandrea
Secondo me non è fattibile, anche l'ultima versione funziona solo parzialmente, se selezioni le option una alla volta va bene, se fai una selezione multipla di option (tipo cinque) in un solo colpo non funziona più.

Questa nuova versione tiene conto anche delle selezioni multiple (shift).

<script language="javascript" type="text/javascript">
var maxSel=2;//numero massimo di opzioni selezionabili 
var prevSel="";
var actSel="";
function checkSel(mSel){
	prevSel=actSel;
	actSel="";
	var NumSel=0;
	for (var i=0;i<mSel.length; i++){
		if(mSel.options[i].selected){
			NumSel++;
			actSel+=mSel.options[i].index+"|";
		}
	}
	if (NumSel>maxSel){
		arr_prev=prevSel.split("|");
		var lastSel=actSel;
		for(var j=0; j<arr_prev.length; j++){
			if(arr_prev[j]!=""){
				lastSel=lastSel.replace(arr_prev[j]+"|","");
			}
		}
		if(lastSel.indexOf("|")==-1){//ctrl
			mSel.options[lastSel].selected=false;
		}else{//shift
			arr_act=lastSel.split("|");
			for(var k=0; k<arr_act.length; k++){
				if(arr_act[k]!=""){
					mSel.options[arr_act[k]].selected=false;
				}
			}
		}
		actSel=prevSel;
	}
}
</script>

Dai primi test sommari sembra funzionare.
P.S.: Non mi è chiaro il significato di: "non è fattibile", ho cercato in vari dizionari ma senza risultati...