Salve a tutti. Sto sbattendo la testa da due giorni su quella credo sia una stupidaggine. Ho 4 checkbox e due radiobutton. Voglio che al cliccare uno dei due radio, si disabilitino 3 checkbox su 4 ed al cliccare l'altro radio, si riabilitino le tre checkbox precedentemente disabilitate.
Ho trovato un javascript e modificandolo ho ottenuto tutto ciò che voglio. Il problema però, è che quando lo vado ad applicare ad una pagina web che sto facendo non funziona.
Vi posto i due esempi perchè mi possiate aiutare.
Esempio 1, scaricato, adattato e funzionante:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta content="text/css" name="Content-Style-Type">
<meta content="text/javascript" name="Content-Script-Type">
<title>Example</title>
<script type="text/javascript">
function toggle (o) {
var e, i = 0
while (e = o.parentNode.parentNode.getElementsByTagName ('INPUT')[i++]) {
if (e.name == 'headitem[]') e.disabled = o.checked
}
}
function enable(cbx) {
if(!cbx) return;
var frm = cbx.form;
for(var i=0;i<frm.elements.length;i++) {
if(frm.elements[i].type && (frm.elements[i] != cbx)) {
if(frm.elements[i].type == 'checkbox') {
frm.elements[i].disabled = !cbx.checked;
}
}
}
}
</script>
</head>
<body>
<form>
<label><input type="radio" name="sesso" value="0" checked onClick="enable(this)"/>U</label>
<label><input type="radio" name="sesso" value="1" onClick="toggle (this)" >D</label>
<label><input type="checkbox" name="headitem[]" value="barba"/>ip</label>
<label><input type="checkbox" name="headitem[]" value="baffi"/>host</label>
<label><input type="checkbox" name="headitem[]" value="pizzetto"/>name</label>
<label><input type="checkbox" name="baffi" value="non_disabilitare"/>Non disabilitare</label>
</form>
</body>
</html>
Esempio 2, applicato alla mia pagina e non funzionante:
<!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=iso-8859-1">
<meta content="text/css" name="Content-Style-Type">
<meta content="text/javascript" name="Content-Script-Type">
<title>Example</title>
<script type="text/javascript">
function toggle (o) {
var e, i = 0
while (e = o.parentNode.parentNode.getElementsByTagName ('INPUT')[i++]) {
if (e.name == 'headitem[]') e.disabled = o.checked
}
}
function enable(cbx) {
if(!cbx) return;
var frm = cbx.form;
for(var i=0;i<frm.elements.length;i++) {
if(frm.elements[i].type && (frm.elements[i] != cbx)) {
if(frm.elements[i].type == 'checkbox') {
frm.elements[i].disabled = !cbx.checked;
}
}
}
}
</script>
<style type="text/css">
#appoggio_dati_personali {
width:460px;
height:80px;
top:10px;
left:0px;
position:absolute;
}
#u {
width:9px;
height:16px;
position:absolute;
left: 360px;
top: 40px;
}
#rbu {
width:13px;
height:22px;
position:absolute;
left: 408px;
top: 40px;
}
#d {
width:9px;
height:16px;
position:absolute;
left: 398px;
top: 40px;
}
#rbd {
width:15px;
height:24px;
position:absolute;
left: 370px;
top: 40px;
}
#appoggio_caratteristiche_fisiche {
width:488px;
height:80px;
left:470px;
top:10px;
position:absolute;
}
#scritta_occhiali {
width:45px;
height:16px;
position:absolute;
left: 92px;
top: 40px;
}
#cb_occhiali {
width:20px;
height:20px;
position:absolute;
left: 140px;
top: 40px;
}
#scritta_barba {
width:34px;
height:16px;
position:absolute;
left: 181px;
top: 40px;
}
#cb_barba {
width:20px;
height:20px;
position:absolute;
left: 218px;
top: 40px;
}
#scritta_baffi {
width:27px;
height:16px;
position:absolute;
left: 259px;
top: 40px;
}
#cb_baffi {
width:20px;
height:20px;
position:absolute;
left: 289px;
top: 40px;
}
#scritta_pizzetto {
width:43px;
height:16px;
position:absolute;
left: 330px;
top: 40px;
}
#cb_pizzetto {
width:20px;
height:20px;
position:absolute;
left: 377px;
top: 40px;
}
</style>
</head>
<body>
<div id="wrapper">
<form>
<div id="appoggio_dati_personali">
<div id="u">U </div>
<div id="rbu">
<label>
<input name="sesso" type="radio" value="1" onclick="toggle(this)"/>
</label>
</div>
<div id="d">D</div>
<div id="rbd">
<label>
<input name="sesso" type="radio" value="0" checked="checked" onclick="enable(this)"/>
</label>
</div>
</div>
<div id="appoggio_caratteristiche_fisiche">
<div id="scritta_occhiali">Occhiali</div>
<div id="cb_occhiali">
<label>
<input type="checkbox" name="occhiali"/>
</label>
</div>
<div id="scritta_barba">Barba</div>
<div id="cb_barba">
<label>
<input type="checkbox" name="headitem[]"/>
</label>
</div>
<div id="scritta_baffi">Baffi</div>
<div id="cb_baffi">
<label>
<input type="checkbox" name="headitem[]"/>
</label>
</div>
<div id="scritta_pizzetto">Pizzetto</div>
<div id="cb_pizzetto">
<label>
<input type="checkbox" name="headitem[]"/>
</label>
</div>
</div>
</form>
</div>
</body>
</html>
Posso sapere dove diavolo sbaglio????
Mille grazie in anticipo a tutti colore che mi vorranno aiutare.
Rispondi quotando
