Heute möchte ich euch ein kleines nützliches JQuery-Script vorstellen, mit dem ihr eine Selectbox, die das Attribut „disabled“ besitzt, durch eine Checkbox mit Hilfe von JQuery aktiviert bzw. „enabled„. Nützlich kann dies z.B. sein, wenn ihr verschiedene Elemente habt, die inhaltlich abhängig von der Auswahl einer Checkbox sind. Eine Idee wäre z.B., dass Einstellungen für ein bestimmtes Tool verwaltet werden sollen und eine Selectbox erst auswählbar sein sollte, wenn diese Option überhaupt relevant ist, also per Checkbox aktiviert wurde.

Für das kleine JQuery-Script bietet sich folgenden Ausgangssituation an:

Es gibt also wie beschrieben eine Checkbox und eine Selectbox, die das Attribut disabled besitzt. Wichtig hierbei ist, dass die Element eindeutig via JQuery identifizierbar sind. In diesem Beispiel ist dies durch das ID-Attribut an beiden HTML-Tags gegeben.

Das JQuery-Script, dass beim Klicken der Checkbox die Selectbox enabled bzw. beim wiederholten Klicken wieder deaktiviert, sieht folgendermaßen aus:

$("#checkbox").live("click", function(){
        if ( $(this).attr("checked")==true ) {            
            $("#selectbox").removeAttr("disabled");
        } else {
            $("#selectbox").attr("disabled","disabled");
        }
        return true;
    });

Das Besondere an diesem Skript ist der Einsatz der JQuery-Live-Funktion. Sie ermöglicht auch nachträglich, via JQuery/Javascript, hinzugefügte HTML-Elemente mit dem Click-Event zu versehen. Solltet ihr nicht auf die Live-Funktion angewiesen sein, funktioniert das Skript natürlich auch mit dem hier eher gebräuchlichen Change-Event. In diesem Fall würde auch die Überprüfung des Checked-Attribut entfallen.

Dieses Skript ist natürlich nicht nur an eine Selectbox gebunden. Es wäre ebenfalls möglich mehrere HTML-Elemente damit zu aktivieren/enablen. Dies würde wiefolgt aussehen:

$("#checkbox").live("click", function(){
        if ( $(this).attr("checked")==true ) {            
            $("#selectbox-1").removeAttr("disabled");
            $("#selectbox-2").removeAttr("disabled");
            $("#textarea").removeAttr("disabled");
        } else {
            $("#selectbox-1").attr("disabled","disabled");
            $("#selectbox-2").attr("disabled","disabled");
            $("#textarea").attr("disabled","disabled");
        }
        return true;
    });

In diesem JQuery-Skript werden die Selectboxen mit den IDs selectbox-1, selectbox-2 und die Textarea mit der ID textarea enabled bzw. beim nächstmaligen Klicken wieder disabled.