クリックまたは置くと、ドロップダウンリストCSSを変更しますか?
-
22-08-2019 - |
質問
<のhref = "https://stackoverflow.com/questions/624102/enable-a-currently-disabled-dropdown-list-when-clicking-the-dropdown-list" タイトル= "この回答" に触発さ> https://stackoverflow.com/questions/624102/enable-a-currently-disabled-dropdown-list-when-clicking-the-dropdown-list の私が何かを試してみましたが、私は無効選択にいくつかの灰色の背景を追加しましたます。
問題は、私は(これはラジオボタンが無効になっていた)いくつかの選択をクリックすると、ドロップダウンリストの背景が灰色のままであることです。
ラジオボタンがチェックされていない場合でも、クリックしたときにどのように私は(白)正常に戻ってそれを回すことができる?
あなたはそれがここに住んで見ることができます http://jsbin.com/okuca/する
ここに私の実際のコードです
<!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>
あなたはここでそれを編集することができます。 http://jsbin.com/okuca/editする
解決
問題は、マウスのボタンを離すまで、クリックハンドラが解雇されていない(と、ドロップダウンが消滅)ので、label.disabled select
スタイルがまだ適用されていることである。
この問題を解決するには、2つの方法があります。まず、あなたは無効なスタイリングを上書きします:focus
ための別のCSSルールを、追加することができます:
label.disabled select:focus { opacity: 1.0; filter: alpha(opacity=100); background-color:white; }
あなたのスタイルは、より複雑な取得する場合しかし、これは、トラブルにあなたを得ることができます。代わりに、私はマウスダウンハンドラにあなたのクリックハンドラを変更するお勧めします:
$('div.formdiv').bind('mousedown',function() {
この火災にハンドラを引き起こし(およびクラスが削除される)ののドロップダウンが表示される前に。