[JS]Checkboxen[] Enablen&Disablen

[Freemann]

Zit nu al ff een paar dagen te kloten met het volgende:

ik heb meerdere regels met "records". Aan het einde van deze records staan 2 checkboxen.
Deze 2 checkboxen hebben verschillende functies. En vormen tijdens een submit van het vorm 2 array's welke ik met ASP verder verwerk.

even een voorbeeld:
o = open
v = checked/aangevinkt
x = disabled

naam 1 2
- record1 o o
- record2 o o
- record3 o o

als ik nu bij record2 de 1e checkbox aanvink, dan moeten bij record1,2 en 3 checkbox 2 worden gedisabled.

naam 1 2
- record1 o x
- record2 V x
- record3 o x

als ik nu bij record3 de 2e checkbox aanvink, dan moeten bij record1,2 en 3 checkbox 1 worden gedisabled.

naam 1 2
- record1 x o
- record2 x o
- record3 x V

Heb al wel dat ik 1 rij checkboxen wat kan doen, maar niet dat de 2 verschillende checkboxen "gekoppeld" zijn.

het script wat ik hier voor gebruik is de volgende:

code:

function init()
{
    if (!document.layers) return;
    var box = document.forms[0].elements;
    for (var i=0;i<box.length;i++)
    {
        box[i].disabled = false;
    }
}

function disableIt(obj)
{
    obj.disabled = !(obj.disabled);
    var z = (obj.disabled) ? 'disabled' : 'enabled';
    //alert(obj.type + ' now ' + z);
}

function extracheck(obj)
{
    return !obj.disabled;
}
// -->
</script>

het volgende probeer ik nu werkend te krijgen maar dat lukt niet omdat er dubbele namen in het vorm zitten:

code:

<form name="opschonen">
<a href="javascript:disableIt(document.opschonen.terug)">a</a>
<input onClick="javascript:disableIt(document.opschonen.terug)" name="verwijder" type="checkbox" value="">
<input onClick="javascript:disableIt(document.opschonen.terug)" name="verwijder" type="checkbox" value="">
<input onClick="javascript:disableIt(document.opschonen.verwijder)" name="terug" type="checkbox" value="">
<input onClick="javascript:disableIt(document.opschonen.verwijder)" name="terug" type="checkbox" value="">
</form>

het bovenstaande heb ik van de volgende site vandaan:
http://www.quirksmode.org/index.html
Nu kom ik alleen niet verder omdat het gewoon weg niet werkt. Wie heeft een idee hoe ik dit verder aan kan pakken(of het script zodanig aan kan passen dat het wel werkt)?

[ Voor 9% gewijzigd door Freemann op 08-08-2004 14:41 ]

[gorgi_19]

Zie P&W FAQ - HTML / javascript /css, etc...

* gorgi_19 stuurt het topic per postduif richting Webdesign & Graphics

[faabman]

JavaScript:

function disableIt(naam){
    if(this.checked){
        for(var i = 0; i < document.forms['opschonen'].elements.length ; i++){
            var objNode = document.forms['opschonen'].elements[i];
            if(objNode.name == naam){
                objNode.disabled = true;
            }   
        }
    }
}

zoiets

[ Voor 178% gewijzigd door faabman op 08-08-2004 14:56 ]

[Freemann]

faabman schreef op 08 augustus 2004 @ 14:46:

JavaScript:

function disableIt(naam){
    if(this.checked){
        for(var i = 0; i < document.forms['opschonen'].elements.length ; i++){
            var objNode = document.forms['opschonen'].elements[i];
            if(objNode.name == naam){
                objNode.disabled = true;
            }   
        }
    }
}

zoiets

ok thanx! ik ga het morgen even proberen ga zometeen even van het mooie weer genieten ik laat nog even van me horen of het wel of niet werkt


[edit]
hmmmm net toch nog maar ff met me eigenwijze hoofd zitten proberen, en nu is dit het resultaat:

code:

Error: activeer is not defined
Source File: javascript:disableIt(activeer)
Line: 1

dit heb ik in me ASP code staan:

ASP:

Response.Write "<input  type='checkbox' name='verwijder' onClick='javascript:disableIt(activeer)'>"

........

[ Voor 44% gewijzigd door Freemann op 08-08-2004 23:54 ]

[crisp]

de functie verwacht ook een string als parameter, en geen object-referentie:

HTML:

onclick="disableIt('activeer')"

dus (en laat aub javascript: achterwege in eventhandlers)

[Freemann]

ok nu ik alle commentaren, scriptjes en aanbevelingen heb doorgevoerd ben ik tot het volgende niet werken product gekomen :

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function disableIt(naam){
    if(this.checked){
        for(var i = 0; i < document.forms['opschonen'].elements.length ; i++){
            var objNode = document.forms['opschonen'].elements[i];
            if(objNode.name == naam){
                objNode.disabled = true;
            }   
        }
    }
}
// -->
</script>
</head>
<body>

<form name="opschonen">
   <a href="javascript:disableIt('activeer')">activeer</a>
   <input onClick="disableIt('activeer')" name="verwijder" type="checkbox" value="1">
   <input onClick="disableIt('activeer')" name="verwijder" type="checkbox" value="2">
   <input onClick="disableIt('verwijder')" name="activeer" type="checkbox" value="3">
   <input onClick="disableIt('verwijder')" name="activeer" type="checkbox" value="4">
</form>

</body>
</html>

Snap er geen hol meer van. Op wat ik ook klik of wat ik ook aanvink er gebeurt helemaal niks. Geen interactie of foutmelding, nee helemaal niks.
Wat gaat er nu niet goed

Iemand die hier nog zijn licht over kan laten schijnen?

[ Voor 19% gewijzigd door Freemann op 09-08-2004 00:00 ]

[crisp]

volgens mij zoek je zoiets:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function disableIt(check,naam) {
  var el = check.form.elements[check.name], i, checked=check.checked;
  if (i=el.length) while (i--) if (el[i].checked) { checked=true; break; }
  el = check.form.elements[naam];
  if (el != null) {
    if (i=el.length) {
      while (i--) el[i].disabled = checked;
    } else el.disabled = checked;
  }
}
</script>
</head>
<body>
<form action="#">
   <input onclick="disableIt(this,'activeer[]')" name="verwijder[]" type="checkbox" value="1" />
   <input onclick="disableIt(this,'verwijder[]')" name="activeer[]" type="checkbox" value="1" /><br />
   <input onclick="disableIt(this,'activeer[]')" name="verwijder[]" type="checkbox" value="2" />
   <input onclick="disableIt(this,'verwijder[]')" name="activeer[]" type="checkbox" value="2" /><br />
   <input onclick="disableIt(this,'activeer[]')" name="verwijder[]" type="checkbox" value="3" />
   <input onclick="disableIt(this,'verwijder[]')" name="activeer[]" type="checkbox" value="3" />
</form>
</body>
</html>

[Freemann]

Het is geweldig!!
Hij werkt eindelijk

Is het heel erg lastig als ik je vraag of je het scriptje uit wilt leggen?

[Verwijderd]

Je zou eventueel het volgende aan de het script kunnen toevoegen/wijzigen

code:

// functie definitie
function disableIt(check)

// regel 1 van functie
var naam = check.name.indexOf('verwijder') > -1 ? 'activeer[]' : 'verwijder[]';

// event handler (in de input tag)
onclick="disableIt(this)"

[ Voor 34% gewijzigd door Verwijderd op 09-08-2004 01:10 ]

[Freemann]

Verwijderd schreef op 09 augustus 2004 @ 01:10:
Je zou eventueel het volgende aan de het script kunnen toevoegen/wijzigen

code:

// functie definitie
function disableIt(check)

// regel 1 van functie
var naam = check.name.indexOf('verwijder') > -1 ? 'activeer[]' : 'verwijder[]';

// event handler (in de input tag)
onclick="disableIt(this)"

hmmm dat heb ik even geprobeerd, maar dat werkt niet.
Dat resulteerd in de volgende foutmelding:

code:

Error: el is not defined
Source File: http://192.168.0.108/mtc/ontwikkel/patientbeheer.asp?pagina=opschonen
Line: 17

[Verwijderd]

Het lijkt erop dat je de eerste regel uit het orginele script hebt verwijderd... ik bedoelde dat je die die 1e regel van mij er aan toevoegde waardoor het er zo gaat uitzien:

code:

<script type="text/javascript">
function disableIt(check) {
  var naam = check.name.indexOf('verwijder') > -1 ? 'activeer[]' : 'verwijder[]';
  var el = check.form.elements[check.name], i, checked=check.checked;
  if (i=el.length) while (i--) if (el[i].checked) { checked=true; break; }
  el = check.form.elements[naam];
  if (el != null) {
    if (i=el.length) {
      while (i--) el[i].disabled = checked;
    } else el.disabled = checked;
  }
}
</script>

en dus:

code:

<input onclick="disableIt(this)" name="verwijder[]" type="checkbox" value="1" /> etc.

[ Voor 10% gewijzigd door Verwijderd op 09-08-2004 01:53 ]

[crisp]

Verwijderd schreef op 09 augustus 2004 @ 01:10:
Je zou eventueel het volgende aan de het script kunnen toevoegen/wijzigen

code:

// functie definitie
function disableIt(check)

// regel 1 van functie
var naam = check.name.indexOf('verwijder') > -1 ? 'activeer[]' : 'verwijder[]';

// event handler (in de input tag)
onclick="disableIt(this)"

nee, zou ik niet doen want daarmee maak je het script juist inflexibeler - stel dat je dezelfde truuk ook wilt gebruiken voor een ander setje checkboxen in hetzelfde formulier? En waarom doe je zo moeilijk met indexOf?

mfrijm schreef op 09 augustus 2004 @ 00:50:
Het is geweldig!!
Hij werkt eindelijk

Is het heel erg lastig als ik je vraag of je het scriptje uit wilt leggen?

ik had gehoopt dat je het eerst zelf zou analyseren - ik heb expres wat lastige constructs gebruikt

[Verwijderd]

crisp schreef op 09 augustus 2004 @ 06:58:
[...]

nee, zou ik niet doen want daarmee maak je het script juist inflexibeler - stel dat je dezelfde truuk ook wilt gebruiken voor een ander setje checkboxen in hetzelfde formulier? En waarom doe je zo moeilijk met indexOf?

[...]

ik had gehoopt dat je het eerst zelf zou analyseren - ik heb expres wat lastige constructs gebruikt

Ik gebruik indexOf zodat de TS eventueel nog nummers kan gaan plaatsen in de array haakjes, mocht dat eventueel nodig zijn.

Over de flexibiliteit daarin je gelijk... maar ik ging ervan uit dat er een heel specifieke oplossing gezocht werd. Daarnaast kon het nog wel iets pittiger gemaakt worden om te begrijpen . (plus ik verveelde me )

Aan mfrijm: In princiepe is dit script niet zo heel moeilijk en omdat je heel goed begrijpt wat het in de praktijk uitvoerd moet het voor jou toch mogelijk zijn om terug te redeneren hoe het werkt. Helemaal gezien je zelf met ASP werkt. Dan moet het toch wel een stuk makkelijker zijn om een andere programmeertaal te ontrafelen.