Checkbox con funzionalità radiobutton

**f.marci** · 18-01-2012, 21:02

Salve a tutti,
chiedo scusa se ho sbagliato titolo ma non so proprio come definire ciò che sto cercando!

Premetto che mi sono buttato su Javascript martedì scorso quindi definirmi neofita è poco.
Comunque...

espongo ciò che mi affligge:

ho 4 checkbox: check1, check2, check3, check4

Si apre la pagina...
check1=disabled,checked
check2=enabled,NON-checked
check3=enabled,NON-checked
check4=enabled,NON-checked

se l'utente clicca su una delle 3 check "abilitate" la check1 si abilita e la "spunta" viene rimossa. (fino qui tutto bene)

L'utente deve avere la possibilità di selezionare a piacimento la check2,3 o 4 anche contemporaneamente.

Ecco ciò che non riesco a ottenere..

se clicco sulla checkbox 1:
- tutte le spunte inserite devono sparire
- e la checkbox1 viene disabilitata e spuntata

Riporto il codice che sto utilizzando:

codice:

function functionTest(form) {
	if (document.getElementById('check2').checked == true) {
		document.getElementById('check1').disabled = false;
		document.getElementById('check1').checked = false;
	}
	else if (document.getElementById('check3').checked == true) {
		document.getElementById('check1').disabled = false;
		document.getElementById('check1').checked = false;
	}
	else if (document.getElementById('check4').checked == true) {
		document.getElementById('check1').disabled = false;
		document.getElementById('check1').checked = false;
	}
        else if (document.getElementById('check1').checked == true) {
		document.getElementById('check1').disabled = true;
                document.getElementById('check2').checked = false;
		document.getElementById('check3').checked = false;
		document.getElementById('check4').checked = false;
	}
	else {
		document.getElementById('check1').checked = true;
		document.getElementById('check1').disabled = true;
		document.getElementById('check2').checked = false;
		document.getElementById('check3').checked = false;
		document.getElementById('check4').checked = false;
	}
}

Dove sto sbagliando??
Ringrazio tutti quanti in anticipo e in particolare html.it che ci offre questi splendidi spazi per dare la possibilità a neofiti come il sottoscritto di apprendere e chiarire argomenti che altrimenti rimarrebbero dei misteri.

Saluti
Marcello

**cavicchiandrea** · 18-01-2012, 22:39

codice:

function functionTest(form) {
	if (document.getElementById('check1').checked == true) {
		document.getElementById('check1').disabled = true;
                document.getElementById('check2').checked = false;
		document.getElementById('check3').checked = false;
		document.getElementById('check4').checked = false;
	}
	else {
		document.getElementById('check1').checked = false;
		document.getElementById('check1').disabled = false;

	}
}

**f.marci** · 19-01-2012, 01:37

Non so...

Ho copiato e incollato il tuo script ma non mi funziona..dov'è l'errore?

Qui sotto il codice completo della pagina-test!

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<script type="text/javascript">
function functionTest(form) {
	if (document.getElementById('check1').checked == true) {
		document.getElementById('check1').disabled = true;
        document.getElementById('check2').checked = false;
		document.getElementById('check3').checked = false;
		document.getElementById('check4').checked = false;
	}
	else {
		document.getElementById('check1').checked = false;
		document.getElementById('check1').disabled = false;
	}
}
</script>
</head>
<body>
<form>
<input id="check1" type="checkbox" disabled="disabled" checked="checked" onchange="functionTest(form)"/>
<input id="check2" type="checkbox" onchange="functionTest(form)"/>
<input id="check3" type="checkbox" onchange="functionTest(form))"/>
<input id="check4" type="checkbox" onchange="functionTest(form)"/>
</form>
</body>
</html>

**cavicchiandrea** · 19-01-2012, 01:58

Usa l'evento onclick e togli la variabile form che non serve onclick="functionTest()"

**f.marci** · 19-01-2012, 10:47

Niente da fare..
Con il metodo suggerito da te non funzionano neanche i check abilitati..
Me li fa cliccare ma non mette nessuna spunta.

Ho ottenuto risultati migliori con questo codice:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<script type="text/javascript">
function functionTest(form) {
	if (document.getElementById('check2').checked == true ||
		document.getElementById('check3').checked == true ||
		document.getElementById('check4').checked == true) {
		document.getElementById('check1').checked = false;
		document.getElementById('check1').disabled = false;
	}
	else if (document.getElementById('check1').checked == true) {
		document.getElementById('check1').disabled = true;
		document.getElementById('check2').checked = false;
		document.getElementById('check3').checked = false;
		document.getElementById('check4').checked = false;
	}
	else {
		document.getElementById('check1').checked = true;
		document.getElementById('check1').disabled = true;
	}
}
</script>
</head>
<body>
<form>
<input id="check1" type="checkbox" disabled="disabled" checked="checked" onclick="functionTest(form)"/>
<input id="check2" type="checkbox" onclick="functionTest(form)"/>
<input id="check3" type="checkbox" onclick="functionTest(form)"/>
<input id="check4" type="checkbox" onclick="functionTest(form)"/>
</form>
</body>
</html>

Con questo codice:
- [OK] se clicco su uno dei 3 check abilitati mi mette la spunta e mi abilita il primo.
- [OK] se tolgo la spunta dal check 2, check 3 e check 4 il check 1 viene disabilitato e spuntato.
- [Accidenti questo non funziona] se lasciando spuntato una delle checkbox (che sia il 2, il 3 o il 4) e clicco sul primo non accade nulla.

Forse la mia spiegazione non è molto chiara

Se avete dubbi chiedete pure...devo riuscire a risolvere sto problema!

**Vindav** · 19-01-2012, 11:34

codice:

<input id="check1" type="checkbox" disabled="disabled" checked="checked" onclick="functionTest(this)"/>
<input id="check2" type="checkbox" onclick="functionTest(this)"/>
<input id="check3" type="checkbox" onclick="functionTest(this)"/>
<input id="check4" type="checkbox" onclick="functionTest(this)"/>

function functionTest(el) {
    if(el.id != "check1"){
        document.getElementById('check1').checked= false;
        document.getElementById('check1').disabled = false;
    }else{
        el.disabled = true;
        document.getElementById('check2').checked = false;
        document.getElementById('check3').checked = false;
        document.getElementById('check4').checked = false;
    }
}

**f.marci** · 19-01-2012, 11:47

Mi inchino a Vindav..

Così funziona perfettamente..

Grazie a tutti per la disponibilità!!

bye

Discussione: Checkbox con funzionalità radiobutton

Strumenti discussione

Ricerca discussione

Visualizza

Checkbox con funzionalità radiobutton

Permessi di invio