フォームにおいての選択可・不可の設定について

質問

フォームでのリストメニュー（今回は日付選択用｛年・月・日｝）を選択するか、チェックボックス（今回は日付不明を選択用）を選択するかを作りたいのですが。

もし、メニューリスト（年・月・日の３つ）すべてを選択した場合、チェックボックス（日付不明）を選択できないようにしたいのと、逆に、チェックボックス（日付不明）を選択した場合、メニューリスト（年・月・日の全て）を選択できないようにしたいのですがどのようにしたらよいでしょうか？

回答No.2

yambejp · ベストアンサー

「選択できないように」するのは簡単ですが、ユーザビリティーは
高くありません。
つまり一度日付不明を解除してからでないと日付けが選べないと
なると「めんどくさい」インターフェイスになります。

日付けを選ぶと「日付不明」が解除され、「日付不明」をチェック
すると日付けがクリアになり、年月日がすべて未選択だと
「日付不明」にチェックがはいるというようなフローでいかがですか？

そうするとこんな感じで。
<script language="javascript">
function check(obj){
var f=obj.form;
switch(obj.type){
case "select-one":
if(obj.value!=""){
f.humei.checked=false;
}else{
var flg=true;
for (var i=0;i<f.length;i++){
if(f[i].type=="select-one" && f[i].value!="") flg=false;
}
f.humei.checked=flg;
}
break;

case "checkbox":
for (var i=0;i<f.length;i++){
if(f[i].type=="select-one") f[i].selectedIndex=0;
}
break;
default:
break;
}
}
</script>
<form>
<select name="y" onChange=" check(this)">
<option value="">===年===
<option value="2000">2000
<option value="2001">2001
<option value="2002">2002
</select>
</span>
<select name="m" onChange=" check(this)">
<option value="">===月===
<option value="1">1
<option value="2">2
<option value="3">3
</select>
<select name="d" onChange=" check(this)">
<option value="">===日===
<option value="1">1
<option value="2">2
<option value="3">3
</select>
<input type="checkbox" name="humei" checked onChange=" check(this)">日付不明
</form>

補足

ユーザビリティまで考えていただき、ありがとうございます。大変参考になりました。

回答No.1

foreach

選択できないように。ということであれば、方法は２通り考えられます。
１つは条件を満たさない場合は入力不可状態にする方法です。

JavaScriptではフォーム要素にdisabledプロパティがありますので、これをtrueにすることで入力不可能に出来ます。

document.フォーム名.エレメント名.disabled = true(無効化) | false(有効化)

書式はこんな感じです。
（参考サイト：http://f32.aaa.livedoor.jp/~azusa/index.php?t=js&p=22）

もう１つの方法はフォーム要素をDIVで括って、そのDIVごと非表示にする方法です。非表示なので物理的に入力できない状態にしてしまうわけです。

document.getElementById(DIVのID).style.display = "none";
で非表示

document.getElementById(DIVのID).style.display = "block";
で表示

こんな感じで制御したらお望みのことが実現できます。