✔ spezifische checkboxen disablen

[stephanfeltel]

Hallo an alle.

ich hab folgendes Problem:

folgende Checkboxliste

<table width="100%"  border="1">
  <tr>
    <td><input type="checkbox" name="14" value="14" ></td>
    <td>14</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="14" value="141" ></td>
    <td>141</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="14" value="142" ></td>
    <td>142</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="14" value="143" ></td>
    <td>143</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="15" value="15" ></td>
    <td>15</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="15" value="151" ></td>
    <td>151</td>
  </tr>
</table>

enthält die Oberkategoerien "14" und "15"
ich möchte jetzt gern mit javascript folgende funktionalität hinbekommen.
Wenn ich eine Oberkategorie 14, oder 15 auswähle, sollen die jeweiligen Unterpunkte 141,142,143 bzw. bei 15 die Unterpunkte 151 disabled werden. (alle unterpunkte der Kategorie)

Wenn ich den Hacken wieder rausnehme sollen sie wieder enabled sein.
Dass gleich passiert wenn ich einen oder beliebig viele Unterpunkte auswähle. Dann soll die jeweilige Hjauptkategorie disabled/enabled werden.

Habt ihr dafür vorschläge. Ich wäre für jede brauchbare Idee dankbar.
beste grüße stephan

 

[Quaese]

Hi,

im onclick-Event einer Checkbox rufst du eine Funktion auf. Dort erstellst du anhand des
Namens der aktuellen Checkbox mit Hilfe der Methode getElementsByName eine Kollektion
der gerade gewählten Kategorie. Anschliessend prüfst du, ob es sich bei der gechecketen Box
um das Hauptkategorieelement handelt.

• Ist es die Hauptkategorie, durchläufst du alle Unterkategorien und setzt sie auf disabled/enabled
• Im anderen Fall prüfst du, ob innerhalb der Unterkategorieelemente eine Box gechecked
  ist und setzt entsprechend die Hauptkategorie.

Im nachstehende Script ist diese Überlegung umgesetzt worden.

function checkKat(objCheckbox){
  // Checkbox-Collection erstellen
  var colCheckbox = document.getElementsByName(objCheckbox.name);

  // BoolVariable setzen (true=Box gechecked, false=nicht)
  var blnChecked = (objCheckbox.checked == true)? true : false;

  // Falls es sich um die Hauptkategorie handelt
  if(objCheckbox == colCheckbox[0]){
    // Alle Unterkategorien durchlaufen und disablen
    for(var i=1; i<colCheckbox.length; i++){
      colCheckbox[i].disabled = blnChecked;
    }
  }else{
    blnChecked = false;
    // Unterkategorien durchlaufen und testen, ob eine gechecked ist
    for(i=1; i<colCheckbox.length; i++){
      // Falls eine Box gechecked wurde
      if(colCheckbox[i].checked == true){
        blnChecked = true;
        break;
      }
    }
  // Hauptkategorie-Checkbox entsprechend setzen
  colCheckbox[0].disabled = blnChecked;
  }
}

Aufgerufen wird die Funktion in jedem deiner Checkboxen.

<tr>
  <td><input type="checkbox" onclick="checkKat(this);" name="14" value="14" ></td>
  <td>14</td>
</tr>
<tr>
  <td><input type="checkbox" onclick="checkKat(this);" name="14" value="141" ></td>
  <td>141</td>
</tr>
  ...
<tr>
  <td><input type="checkbox" onclick="checkKat(this);" name="15" value="151" ></td>
  <td>151</td>
</tr>

Ich hoffe, das hilft dir weiter.

Ciao
Quaese

 

[stephanfeltel]

super. besten Danke. genau so hab ich mir das vorgestellt...