選択したラジオボタンでSELECTボックスのアクティブ・非アクティブをを切り替える。
画面イメージとhtml・javascriptのソースメモ。
ラジオボタンでSELECTボックスのアクティブを切り替える
ラジオボタンの「SELECT不可」を選択している場合、
アイテム選択のSELECTボックスは非アクティブな状態。
ラジオボタンの「SELECT不可」を選択すると
アイテム選択のSELECTボックスがアクティブな状態になる。
html・javascriptソースサンプル
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8”>
<title>ラジオボタンでSELECTボックスをアクティブ・非アクティブに切り替える</title>
<script type=”text/javascript”>
function selectChange(){
radio = document.getElementsByName(‘item_box‘)
if(radio[0].checked) {
document.getElementById(‘selectA‘).style.display = ””;
document.getElementById(‘selectB‘).style.display = ”none”;
}else if(radio[1].checked) {
document.getElementById(‘selectA‘).style.display = ”none”;
document.getElementById(‘selectB‘).style.display = ””;
}
}
</script>
</head>
<body>
<form action=”http://xxxxxxxxxxxxxxxxxxx” method=”POST” name=”Form”>
<div><input type=”radio” name=”item_box” value=”0” onclick=”selectChange();” checked=”checked” />SELECT不可</div>
<div><input type=”radio” name=”item_box” value=”1” onclick=”selectChange();” />SELECT可</div>
<p id=”selectA” disabled>
【アイテム選択】
<select name=”item” style=”width:15%;”>
<option value=”” selected>▼</option>
<option value=”1” >アイテム1</option>
<option value=”2” >アイテム2</option>
<option value=”3” >アイテム3</option>
</select>
</p>
<p id=”selectB” style=”display:none;”>
【アイテム選択】
<select name=”item” style=”width:15%;”>
<option value=”” selected>▼</option>
<option value=”1” >アイテム1</option>
<option value=”2” >アイテム2</option>
<option value=”3” >アイテム3</option>
</select>
</p>
</form>
</body>
</html>