Ändern Sie die Dropdownliste CSS, wenn Sie auf klicken oder den Mauszeiger bewegen?

Inspiriert von https://stackoverflow.com/questions/624102/enable-a-currently-disabled-dropdown-list-when-clicking-the-dropdown-list habe ich etwas versucht und ich habe einen grauen Hintergrund zur deaktivierten Auswahl hinzugefügt.Ändern Sie die Dropdownliste CSS, wenn Sie auf klicken oder den Mauszeiger bewegen?

Das Problem ist, dass, wenn ich auf einige Auswahl klicken (das Optionsfeld deaktiviert wurde) der Hintergrund der Dropdown-Liste grau bleibt.

Wie kann ich es drehe wieder normal (weiß), wenn auch wenn Radiobutton geklickt wird nicht überprüft?

Sie können es hier live sehen http://jsbin.com/okuca/

Hier ist meine eigentliche Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Test </title> 
<style type="text/css"> 
    label.disabled select { opacity: 0.5; filter: alpha(opacity=50); background-color:#CCC; } 

</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 

<script type="text/javascript"> 
    $(function() { 
    $('div.formdiv').bind('click',function() { 
     $('label.disabled',this).removeClass('disabled'); 
     $('input:radio',this).attr('checked',true); 
     $('div.formdiv').not(this).find('label').addClass('disabled').find('select').attr('selectedIndex',0); 
    }).find('label').addClass('disabled'); 
    }); 
</script> 
</head> 

<body> 

<div class="formdiv"> 
    <label for="Name"> 
    <input id="Name" name="radio1" type="radio" />Name: 
    <select name="select1"> 
     <option value="Rose">Rose</option> 
     <option value="Lily">Lily</option> 
    </select> 
    </br> 
    </label> 
</div> 

<div class="formdiv"> 
    <label for="Colours"> 
    <input id="Colours" name="radio1" type="radio" />Colour: 
    <select name="select2"> 
    <option value="Red">Red</option> 
    <option value="Green">Green</option> 
    </select> 
    </label> 
    </br> 
</div> 

<div class="formdiv"> 
<label for="Sport"> 
    <input id="Sport" name="radio1" type="radio" />Sport: 
    <select name="select3"> 
    <option value="Tennis">Tennis</option> 
    <option value="Cricket">Cricket</option> 
    </select> 
    </label> 
    </br> 
</div> 
    </body> 
</html>

Sie können es hier bearbeiten: http://jsbin.com/okuca/edit

Quelle

2009-05-15 Mark

FYI, Ihr Beispiel funktioniert einwandfrei auf Firefox. Wenn Sie auf ein Auswahlfeld klicken, wird das Optionsfeld aktiviert. –

@Nadia - Wenn Sie auf die Dropdown-Liste für ein deaktiviertes Optionsfeld klicken, wird das Drop-down-Fenster weiterhin als "deaktiviert" gekennzeichnet, obwohl es ausgewählt wird. –

Das Problem ist, dass der Handler Click ist nicht gefeuert wird, bis Sie die Maustaste loslassen (und das Dropdown verschwindet), so wird der label.disabled select Stil immer noch angewendet.

Es gibt zwei Möglichkeiten, dies zu beheben. Erstens könnten Sie eine andere CSS-Regel für :focus, hinzuzufügen, die das behinderte Styling überschreibt:

label.disabled select:focus { opacity: 1.0; filter: alpha(opacity=100); background-color:white; }

aber diese könnten Sie in Schwierigkeiten geraten, wenn Ihre Stile verschachtelten bekommen. Stattdessen würde ich empfehlen, Ihren Click-Handler auf einen mousedown- Handler zu ändern:

$('div.formdiv').bind('mousedown',function() {

Dies bewirkt, dass die Prozedur Feuer (und die Klasse entfernt werden) vor die Drop-down erscheint.

Quelle

2009-05-15 22:09:59

Vielen Dank auf der Suche nach dem, was ich gesucht habe! :) – Mark

Ändern Sie die Dropdownliste CSS, wenn Sie auf klicken oder den Mauszeiger bewegen?

Antwort

Verwandte Themen