Limitare opzioni in lista checkbox

**Frankos** · 04-08-2005, 08:20

Ciao a tutti,

il mio problema é il seguente.
Ho un form (un unico form) in cui sono presenti due tabelle, ciascuna contenente una serie di checkbox.
P. es. nella prima tabella sono presenti 6 checkbox di nome scelta1, scelta2,...., scelta6.
Nella seconda ci sono 6 checkbox di nome opzione1, opzione2,...,opzione6.
Ora io vorrei che l'utente fosse limitato a 4 scelte nella prima serie e 2 scelte nella seconda serie.
Come posso procedere?

**Mich_** · 04-08-2005, 08:56

Fai una ricerca nel forum (bottone in alto a dx): il problema e` stato gia` affrontato, e a nessuno piace reinventare l'acqua calda.

Puo` darsi che per il tuo problema specifico ci sia la necessita` di un aggiustamento dei parametri. Se non ci riesci chiedi qui, possibilmente postando un codice funzionante.

**Frankos** · 04-08-2005, 09:13

Ciao Mich,

si, in effetti avevo già fatto una cosa simile che funzionava perfettamente, però avevo una sola serie di checkbox.
Qui ne ho 2 serie nello stesso form e applicando lo stesso tipo di soluzione non mi funziona correttamente.
Posto il codice in modo che tu possa provarlo per vederne l'effetto.
Teoricamente dovrebbe limitare a 4 le scelte della prima tabella e a 2 le scelte della seconda tabella, ma in pratica non é proprio cosi.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>
<script language="javascript">
function LimitaCheck(cc,max){
conta = 0;
var cc1 = cc.form;
for(var i=0; i<cc1.length; i++) {
if(cc1[i].type=='checkbox' && cc1[i].checked) {
conta++;
}
}
return (conta<=max);
}

</script>
</head>

<body>
<form name="form1" method="post" action="">
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="250"><table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>scelta1</td>
<td><input name="scelta1" type="checkbox" id="scelta1" value="checkbox" onClick="return LimitaCheck(this.form.scelta1,4)"></td>
</tr>
<tr>
<td>scelta2</td>
<td><input name="scelta2" type="checkbox" id="scelta2" value="checkbox" onClick="return LimitaCheck(this.form.scelta2,4)"></td>
</tr>
<tr>
<td>scelta3</td>
<td><input name="scelta3" type="checkbox" id="scelta3" value="checkbox" onClick="return LimitaCheck(this.form.scelta3,4)"></td>
</tr>
<tr>
<td>scelta4</td>
<td><input name="scelta4" type="checkbox" id="scelta4" value="checkbox" onClick="return LimitaCheck(this.form.scelta4,4)"></td>
</tr>
<tr>
<td>scelta5</td>
<td><input name="scelta5" type="checkbox" id="scelta5" value="checkbox" onClick="return LimitaCheck(this.form.scelta5,4)"></td>
</tr>
<tr>
<td>scelta6</td>
<td><input name="scelta6" type="checkbox" id="scelta6" value="checkbox" onClick="return LimitaCheck(this.form.scelta6,4)"></td>
</tr>
</table></td>
<td width="250"><table width="200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>opzione1</td>
<td><input name="opzione1" type="checkbox" id="opzione1" value="checkbox" onClick="return LimitaCheck(this.form.opzione1,2)"></td>
</tr>
<tr>
<td>opzione2</td>
<td><input name="opzione2" type="checkbox" id="opzione2" value="checkbox" onClick="return LimitaCheck(this.form.opzione2,2)"></td>
</tr>
<tr>
<td>opzione3</td>
<td><input name="opzione3" type="checkbox" id="opzione3" value="checkbox" onClick="return LimitaCheck(this.form.opzione3,2)"></td>
</tr>
<tr>
<td>opzione4</td>
<td><input name="opzione4" type="checkbox" id="opzione4" value="checkbox" onClick="return LimitaCheck(this.form.opzione4,2)"></td>
</tr>
<tr>
<td>opzione5</td>
<td><input name="opzione5" type="checkbox" id="opzione5" value="checkbox" onClick="return LimitaCheck(this.form.opzione5,2)"></td>
</tr>
<tr>
<td>opzione6</td>
<td><input name="opzione6" type="checkbox" id="opzione6" value="checkbox" onClick="return LimitaCheck(this.form.opzione6,2)"></td>
</tr>
</table></td>
</tr>
</table>
</form>
</body>
</html>

**Mich_** · 04-08-2005, 09:30

Ora e` piu` chiaro.

Anzitutto nel richiamo della funzione tu usi:
onClick="return LimitaCheck(this.form.scelta2,4)"
Basterebbe (e sarebbe piu` semplice)
onclick="return LimitaCheck(this,4);"

Per il probelma specifico, forse ti basta una semplice modifica:

codice:

function LimitaCheck(cc,max){
  var conta = 0;
  var ff = cc.form;
  for(var i=0; i<ff.length; i++) {
    var ee = ff.elements[i];
    if(ee.type=='checkbox' && ee.checked && ee.name.substr(0,4)==cc.name.substr(0,4) ) conta++;
  }
  return (conta<=max);
}

Nota che ho modificato dei nomi per razionalita`
Ho aggiunto elements[] per farlo funzionare in tutti i browser.
Ho tolto una graffa, per semplificare la struttura

Nota che viene usato l'attributo name di ogni checkbox per verificare se si tratta della stessa serie: i primi 4 caratteri del nome.
Come dire che il name deve essere presente in tutti i checkbox e i primi 4 caratteri devono essere uguali per ciascuna serie e diversi tra serie diverse.

**Frankos** · 04-08-2005, 09:35

Wow !!! funziona !!

Grazie mille Mich_ (anche più di mille !)

**WEAB** · 29-06-2006, 17:15

Riprendo questo 3D perchè l'ho utilizzato per fare uno script per limitare la possibilità di scelta di CHECHBOX in un FORM.
Funziona su IE, su FF, ma su OPERA, se faccio doppio click sul CHECKBOX; me lo seleziona lo stesso.
Qualcuno sa dirmi perchè, e come rimediare?

Grazie.

**WEAB** · 29-06-2006, 17:41

up!

**WEAB** · 29-06-2006, 18:12

Ri UP

Discussione: Limitare opzioni in lista checkbox

Strumenti discussione

Ricerca discussione

Visualizza

Limitare opzioni in lista checkbox

Permessi di invio