Avatar billede henrikgn Nybegynder
31. juli 2009 - 10:10 Der er 6 kommentarer og
1 løsning

Onclick på en disabled checkbox

Hej

Jeg har en side med en række checkboxes, og har lavet det sådan, at man max kan markere 3, så bliver resten disabled. Det virker fint nok.

Jeg har brug for, at et klik på en af de disabled checkboxe giver en besked. Men synes ikke jeg kan få en event kaldt. Hverken onclick, onmouseup eller noget fanges, når kontrollen er disabled.

Jeg løste problemet i IE ved at pakke alle checkboxe ind i en span-kontrol, og så sætte en onmouseup på span når 3 checkboxe er markeret. Men det virker ikke i andre browsere.

Nogen forslag??
Avatar billede olebole Juniormester
31. juli 2009 - 11:08 #1
<ole>

Naturligvis virker en event handler ikke på en disabled kontrol. Det ville være en grim bug.

Hvis du koder rigtigt kan du sagtens sætte en mouseup handler på et omkransende span og få det til at virke i alle browsere. Prøv at vise din kode, så vi kan rette fejlen(e)

/mvh
</bole>
Avatar billede henrikgn Nybegynder
31. juli 2009 - 11:27 #2
Tak for svaret. Nedenstående kode er meget forsimplet, men viser problematikken:

<script type="text/javascript">

function dis()
{
  document.getElementById('c2').disabled = true;
}

function hit()
{
  alert('c2 hit');
}

</script>
<body>
<form>

<input type="checkbox" id="c1" onclick="dis()" />Check 1

<span id="s1" onmouseup="hgn()"><input type="checkbox" id="c2" />Check 2</span>

</form>
</body>
</html>

Afkrydsning af checkbox 1 disabler checkbox 2. For at fange mouseup event på checkbox 2, er denne pakket ind i en span. Dette virker perfekt i IE (og Opera), men Firefox vil ikke registrere eventet på span kontrollen.
Avatar billede henrikgn Nybegynder
31. juli 2009 - 11:28 #3
Ups, onmouseup på span hedder selvfølgelig "hit()" ikke hgn().
Avatar billede olebole Juniormester
31. juli 2009 - 11:51 #4
Nu forstår jeg  =)

Du kan selv styre enable og disable, hvis du laver dine egen funktioner noget i stil med:

<script type="text/javascript">
var oDisabled = {};
function dis(sId, bEnable) {
  var css = document.getElementById(sId).style;
  oDisabled[sId] = bEnable ? false : true;
  css.filter = bEnable ? "alpha(opacity=100)" :  "alpha(opacity=40)";
  css.opacity = bEnable ? 1 : 0.4;
}

function check4ability(oCheckBox) {
    var sId = oCheckBox.getAttribute("id");
    if (oDisabled[sId]) return false;
    return true;
}

function hit()
{
  alert('c2 hit');
}
</script>

<input type="checkbox" onclick="dis('c2')" />Disabled
<input type="checkbox" onclick="dis('c2', true)" />Enable

<input type="checkbox" id="c2" onclick="return check4ability(this)" />Check

Mon ikke, du selv kan koge videre på den idé?  =)
Avatar billede olebole Juniormester
31. juli 2009 - 11:53 #5
- og når nu funktionen nu enabler, hvis den boolske er sat til true, burde funktionen måske ikke hedde dis med enable  ;o)
Avatar billede henrikgn Nybegynder
13. april 2010 - 13:23 #6
Giv et svar på denne, for at få points.
Avatar billede olebole Juniormester
14. april 2010 - 11:20 #7
Gerne  =)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester